Progress
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" />
Labels
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}%`} />
Height
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'}} />
Backgrounds
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" />
Striped
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} />