Progress Bars

Progress Bars Different Sizes

.progress

40% Complete (success)

Class: .sm

20% Complete

Class: .xs

60% Complete (warning)

Class: .xxs

60% Complete (warning)

Progress bars

40% Complete (primary)
30% Complete (default)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

60% Complete (warning)

Vertical Progress Bars Different Sizes

By adding the class .vertical and .progress-sm, .progress-xs or .progress-xxs we achieve:

40%
100%
60%
60%

Vertical Progress bars

By adding the class .vertical we achieve:

40%
40%
20%
60%
80%