Template > UI Elements > Progress

Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels

Progress Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Backgrounds

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

Labels

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

25%
Something was wrong!
Completed!
Size

We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly. Also .progess-sm and .progress-sm are available.

25%
50%
75%
Striped Progress

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

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.