Progress Bars

ActivityMessagesFAQSupport

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-animatedto .progress-barto animate the stripes right to left via CSS3 animations.

60% Complete (warning)

Vertical Progress Bars Different Sizes

By adding the class .verticaland .progress-sm, .progress-xsor .progress-xxswe achieve:

40%
100%
60%
60%

Vertical Progress bars

By adding the class .verticalwe achieve:

40%
40%
20%
60%
80%