Progress Bar

HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress. In this article, we will discuss how to add this element in the document, how to style it with CSS and animate the progress bar meter. The Visual composer has a add on called “Progress bar Group“.

[su_lightbox type=”image” src=””]pg1[/su_lightbox]


Progress bar has a sub component called Single process. Add it as many as you wanted to the Progress Group.

[su_lightbox type=”image” src=””]pp2[/su_lightbox]


Process Group settings have two styles to choose from. Also we can set the title for the group.

[su_lightbox type=”image” src=””]pp3[/su_lightbox]  

Single progress bar has settings to enter the title and the Percent number for the progress. Save changes.

[su_lightbox type=”image” src=””]pp4[/su_lightbox]