Progress Shortcode

Provide contextual feedback messages for typical user actions with the handful
of available and flexible alert messages.

Get Started

Default


Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.





Height


Set a height value to the .progress element.




Labels


Add labels to your progress bars by placing text within the .progress-bar.

25%

Backgrounds


Use background utility classes to change the appearance of individual progress bars.




Striped


Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.





Circular Bar


Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

HTML/CSS
HTML/CSS

Sizes

HTML/CSS
HTML/CSS

Options

HTML/CSS
HTML/CSS
HTML/CSS