Progress Bars

Contextual progress bars

Stylize the HTML5 progress element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.

Progress bars with current value labels

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

25%

50%

75%

100%

Striped progress bars

Uses a gradient to create a striped effect.

Progress bars with custom labels

25

Copying file 2 of 4...

50%

Completed!

Progress bars Sizes

Default Progress Bar No extra class needed.

Medium Progress Bar Use .progress-bar-md class

Small Progress Bar Use .progress-bar-sm class

Global configuration of progress bars