Image
Buy Now
avatar
dash ui - admin dashboard template
Unlimited Access

Upgrade your plan from a Free trial, to select Business Plan. Start Now

Upgrade Now

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} />