Progress Bars

Basic example

Default progress bar.

95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
95% Complete
95% Complete
95% Complete

Striped example

Uses a gradient to create a striped effect.Use class .progress-bar-striped.

95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
82% Complete
82% Complete
95% Complete

Sizes example

Use class .progress-sm,.progress-mdand .progress-lg.

89% Complete
77% Complete
45% Complete
67% Complete

Animated example

Add .activeto .progress-bar-stripedto animate the stripes right to left.

60% Complete
48% Complete
82% Complete
95% Complete

Completed example

Remove the <span>with .sr-onlyclass from within the progress bar to show a visible percentage.

85%
56%
96%

Stacked example

Place multiple bars into the same .progressto stack them.

Progressbar Vertical

Use class .progress-vertical.

89% Complete
77% Complete
45% Complete
67% Complete

Progressbar Vertical Bottom

Use class .progress-vertical-bottom.

89% Complete
77% Complete
45% Complete
67% Complete