Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

How it works

Default progress bar.

<ProgressBar now={0} className="mb-2" />
<ProgressBar now={25} className="mb-2" />
<ProgressBar now={50} className="mb-2" />
<ProgressBar now={75} className="mb-2" />
<ProgressBar now={100} className="mb-2" />


Add a label prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.

<ProgressBar now={25} label={`${25}%`} />


We only set a height value on the <ProgressBar>, so if you change that value the inner progress-bar will automatically resize accordingly.

<ProgressBar now={25} className="mb-2" style={ { height : '1px'}} />
<ProgressBar now={25} className="mb-2" style={ { height : '20px'}} />


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

<ProgressBar variant="success" now={25} className="mb-2" />
<ProgressBar variant="info" now={50} className="mb-2" />
<ProgressBar variant="warning" now={75} className="mb-2" />
<ProgressBar variant="danger" now={100} className="mb-2" />

Multiple bars

Nest <ProgressBar>s to stack them.

<ProgressBar variant="primary" now={15} key={1} className="mb-2" />
<ProgressBar variant="success" now={30} key={2} className="mb-2" />
<ProgressBar variant="info" now={20} key={3} className="mb-2" />


Uses a gradient to create a striped effect. Not available in IE8. You can apply using striped prop.

<ProgressBar striped variant="primary" now={10} className="mb-2" />
<ProgressBar striped variant="success" now={25} className="mb-2" />
<ProgressBar striped variant="info" now={50} className="mb-2" />
<ProgressBar striped variant="warning" now={75} className="mb-2" />
<ProgressBar striped variant="danger" now={100} className="mb-2" />

Animated stripes

Add animated prop to animate the stripes right to left. Not available in IE9 and below.

<ProgressBar animated now={75} />