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-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%
Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?