Progress Bar

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below.

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

The progress bars can be colored with traditional theme colors plus new accent colors. Below is a list of possible color class names:

.progress-bar-warning
.progress-bar-danger
.progress-bar-info
.progress-bar-success
.progress-bar-default
.progress-bar-primary
.progress-bar-accent1
.progress-bar-accent2
.progress-bar-accent3
.progress-bar-accent4
.progress-bar-accent5
.progress-bar-accent6
.progress-bar-accent7
.progress-bar-accent8
.progress-bar-accent9

Example

60%

Source Code:

Striped Progress Bars

Uses a gradient to create a striped effect. Not available in IE9 and below.

60%

Source Code:

Animated Progress Bars

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

60%

Source Code:

Stacked Progress Bars

Place multiple bars into the same .progress to stack them.