Progress Bars
Basic Example
60% Complete
Striped Example
add class .progress-bar-striped
60% Complete (warning)
Animated Example
add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
65% Complete
With Label
Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.
60% completed
Stacked Example
Place multiple bars into the same .progress to stack them.
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Color Options
80% Complete
60% Complete
70% Complete
65% Complete
80% Complete
70% Complete
80% Complete
95% Complete
80% Complete
60% Complete
70% Complete
65% Complete
80% Complete
70% Complete
80% Complete
95% Complete
Size Options
Add .progress-xs, .progress-sm, .progress-md, .progress-lg to the .progress element
45% Complete
65% Complete
70% Complete
95% Complete
