Default Progress Bars
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels more details.
Multiple bars
Include multiple progress bars in a progress component if you need. Read bootstrap documentaion for more details.
Progress Bar Height
We only set a height
value on the .progress
, so if you change that value the inner .progress-bar
will automatically resize accordingly. Read bootstrap documentaion for more details.
Progress Bar Labels
Add labels to your progress bars by placing text within the .progress-bar
. Read bootstrap documentaion for more details.
Striped Progress Bar
Add .progress-bar-striped
to any .progress-bar
to apply a stripe via CSS gradient over the progress bar’s background color. Read Bootstrap documentaion more details.
Animate Progress Bar
The striped gradient can also be animated. Add .progress-bar-animated
to .progress-bar
to animate the stripes right to left via CSS3 animations. Read Bootstrap documentaion more details.