Progress Bars

Basic example

Default progress bar.

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

Striped example

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

60% Complete
48% Complete
82% Complete
95% Complete
60% Complete
48% Complete
82% Complete
95% Complete
82% 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 .progress-bar-animated 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.

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

Theme Customizer

Download Now
 Choose Demos