Developed by Codescandy

Progress

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

How it works

<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 labels to your progress bars by placing text within the .progress-bar.

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

Height

We only set a height value on the .progress , 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

Use background utility classes to change the appearance of individual progress bars.

<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

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

Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

<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

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

<ProgressBar animated now={75} />
Contents