Progress Bars

Basic example

Default progress bar.

95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
60% Complete
48% Complete
82% Complete
95% Complete

Striped example

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

95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
60% Complete
48% Complete
82% Complete
95% Complete

Sizes example

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

89% Complete
77% Complete
45% Complete
67% Complete

Animated example

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

60% Complete
48% Complete
82% Complete
95% Complete

Completed example

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

85%
56%
96%

Stacked example

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

Animated example

Use class .wow,.animated and .progress-animated.

60% Complete
48% Complete
82% Complete
95% Complete

Animated Striped example

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

48% Complete
60% Complete
95% Complete
81% Complete

Progressbar Vertical

Use class .progress-vertical.

89% Complete
77% Complete
45% Complete
67% Complete

Progressbar Vertical Bottom

Use class .progress-vertical-bottom.

89% Complete
77% Complete
45% Complete
67% Complete
© 2016 - 2017. All rights reserved.