Progress Bar

Progress Default

Use .progress-bar.bg-{colorName} to add different colors to progressbar.

Labeled Progress

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

20%
40%
60%
80%
100%

Striped Progress

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

Animated Progress

To get progressbar with animated effect, add .progress-bar-animated with .progress-bar class.

Progress Sizes

Set a height value on the .progress. So if you change that value, the inner .progress-bar will automatically resize accordingly.