Please wait...

Progress Bars

  1. Home
  2. Basic UI

Default Progress Bar

60% Complete

Progress Bar With Label

75%

Stacked

Place multiple bars into the same .progress to stack them.
35% Complete (success)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Striped

Uses a gradient to create a striped effect. Not available in IE9 and below.
40% Complete (success)

Contextual Alternatives

Progress bars use some of the same button and alert classes for consistent styles.
30% Complete (success)
40% Complete (success)
50% Complete
60% Complete (warning)
80% Complete (danger)

Animated

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.
30% Complete (success)
40% Complete (success)
50% Complete
60% Complete (warning)
80% Complete (danger)

Bar Sizes

Add additional class .progress-lg, progress-md, or progress-sm
30% Complete (success)
40% Complete (success)
50% Complete
70% Complete (warning)

With Material Design Colors

Use class (eg., .bg-red, .bg-cyan) etc. for material colors.
Red
Blue
Purple
15% Complete (success)
20% Complete (success)
20% Complete (warning)
10% Complete (danger)

Skill Bars

Photoshop30%
30% Complete (success)
Html40%
40% Complete (success)
Css350%
50% Complete
Php60%
60% Complete (warning)
Javascript80%
80% Complete (danger)

Bar Indicating

30% Complete (success)
40% Complete (success)
50% Complete
60% Complete (warning)
80% Complete (danger)

Vertical Progress Bar

Vertical Bar

Add additional class .progress-vertical to quickly create vertical progress bar.
20% Complete
35% Complete
45% Complete
60% Complete
75% Complete

Vertical Bar Size

Add additional class .progress-sm, progress-md, progress-lg to progress-vertical to create different sizes of vertical bar.
35% Complete
45% Complete
60% Complete
75% Complete

Vertical Bar Bottom

Add additional class .progress-vertical-bottom to quickly create bottom-vertical progress bar.
20% Complete
35% Complete
45% Complete
60% Complete
75% Complete

Vertical Bar Bottom Size

Add additional class .progress-sm, progress-md, progress-lg to .progress-vertical-bottom to create different sizes of bottom-vertical bar.
35% Complete
45% Complete
60% Complete
75% Complete

Vertical Bar Complex Usage

You can use progress bar in any style suited according to the nature of the task.
35% Complete
35% Complete (success)
35% Complete (success)
20% Complete (warning)
60% Complete60%
75% Complete