Bootstrap: Progress bars

Basic Example

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

60% Complete
<Progress value={60} min={0} max={100} />

With label

<Progress withLabel value={60} min={0} max={100} />

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

40% Complete (success)
20% Complete (info)
60% Complete (warning)
80% Complete (danger)
<Progress success value={40} min={0} max={100} />
<Progress info value={20} min={0} max={100} />
<Progress warning value={60} min={0} max={100} />
<Progress danger value={80} min={0} max={100} />

Striped

Uses a gradient to create a striped effect.

40% Complete (success)
20% Complete (info)
60% Complete (warning)
80% Complete (danger)
<Progress striped success value={40} min={0} max={100} />
<Progress striped info value={20} min={0} max={100} />
<Progress striped warning value={60} min={0} max={100} />
<Progress striped danger value={80} min={0} max={100} />

Animated

Add active to animate the stripes right to left.

40% Complete (success)
20% Complete (info)
60% Complete (warning)
80% Complete (danger)
<Progress striped active success value={40} min={0} max={100} />
<Progress striped active info value={20} min={0} max={100} />
<Progress striped active warning value={60} min={0} max={100} />
<Progress striped active danger value={80} min={0} max={100} />

Stacked

Place multiple progress bars by stacking them in a ProgressGroup.

<ProgressGroup collapseBottom>
  <Progress active striped info withLabel value={35} min={0} max={100} />
  <Progress active striped danger withLabel value={20} min={0} max={100} />
  <Progress active striped warning withLabel value={20} min={0} max={100} />
  <Progress active striped success withLabel value={10} min={0} max={100} />
</ProgressGroup>