Progress Bars

Provide up-to-date feedback.

Basic example

Default progress bar.

55% Complete (primary)
44% Complete (primary)
60% Complete (info)
80% Complete (warning)
90% Complete (danger)
65% Complete (danger)
49% Complete (danger)
98% Complete (danger)

Striped example

Uses a gradient to create a striped effect.Use class .progress-bar-striped.

55% Complete (primary)
44% Complete (primary)
60% Complete (info)
80% Complete (warning)
90% Complete (danger)
65% Complete (danger)
49% Complete (danger)
98% Complete (danger)

Sizes example

Use class .progress-sm,.progress-md and .progress-lg.

55% Complete (primary)
44% Complete (primary)
60% Complete (info)
80% Complete (warning)

Animated example

Add .active to .progress-bar-striped to animate the stripes right to left.

90% Complete (danger)
65% Complete (danger)
49% Complete (danger)
98% Complete (danger)

Animated example

Use class .progress-animated.

Animated striped with tooltip example

Use class .progress-bar-striped, .progress-animated and .active.

Completed example

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

44% Complete (primary)
60% Complete (info)
80% Complete (warning)

Stacked example

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

25% Complete (success)
20% Complete (warning)
15% Complete (danger)
28% Complete (violet)