dashboard

dashboard /

page name

Progress Bars

Basic Example

60% Complete

Striped Example

add class .progress-bar-striped

60% Complete (warning)

Animated Example

add .activeto .progress-bar-stripedto animate the stripes right to left. Not available in IE9 and below.

65% Complete

With Label

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

60% completed

Stacked Example

Place multiple bars into the same .progressto 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-lgto the .progresselement

45% Complete
65% Complete
70% Complete
95% Complete