Documentation
Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
How it works
- We use the
.progressas a wrapper to indicate the max value of the progress bar. - We use the inner
.progress-barto indicate the progress so far. - The
.progress-barrequires an inline style, utility className, or custom CSS to set their width. - The
.progress-baralso requires someroleandariaattributes to make it accessible.
<ProgressBar className="mb-3" />
<ProgressBar className="mb-3" now={25} />
<ProgressBar className="mb-3" now={50} />
<ProgressBar className="mb-3" now={75} />
<ProgressBar now={100} />Labels
Add labels to your progress bars by placing text within the .progress-bar.
<ProgressBar className="mb-3" now={25} label={"25"} style={{height :'3px'}} />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 className="mb-3" now={25} style={{height :'2px'}} />
<ProgressBar className="mb-3" now={25} style={{height :'20px'}} />Backgrounds
<ProgressBar className="mt-3" variant="success" now={25} />
<ProgressBar className="mt-3" variant="info" now={50} />
<ProgressBar className="mt-3" variant="warning" now={75} />
<ProgressBar className="mt-3" variant="danger" now={100} />Multiple bars
<ProgressBar>
<ProgressBar now={15} />
<ProgressBar variant="success" now={30} />
<ProgressBar variant="info" now={20} />
</ProgressBar>Striped
Add .progress-bar-striped to any .progress-bar to apply a stripe.
<ProgressBar animated className="mb-3" now={10} striped />
<ProgressBar animated className="mb-3" now={25} variant="success" striped />
<ProgressBar animated className="mb-3" now={50} variant="info" striped />
<ProgressBar animated className="mb-3" now={75} variant="warning" striped />
<ProgressBar animated className="mb-3" now={100} variant="danger" striped />