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.

Design

Code

<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.

Design

Code

25%

<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.

Design

Code

<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.

Design

Code

<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.

Design

Code

<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.

Design

Code

<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.

Design

Code

<ProgressBar animated now={75} />

EasyLink.Me

Product of Cosmic Stack