Template > UI Elements > Progress
Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Use background utility classes to change the appearance of individual progress bars.
Add labels to your progress bars by placing text within the
We only set a height value on the
.progress, so if you change that value the inner
will automatically resize accordingly. Also
.progress-sm are available.
.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 to animate the stripes
right to left via CSS3 animations.