Skip to main content

ProgressBar

See React Bootstrap/Progress Bars for full documentation and props.

Result
Loading...
Live Editor
<ProgressBar now={60} />

With Label​

Result
Loading...
Live Editor
<ProgressBar now={60} label={`60%`} />

Variants​

Result
Loading...
Live Editor
<>
	<ProgressBar now={60} className="mb-4" />
	<ProgressBar variant="success" now={40} className="mb-4" />
	<ProgressBar variant="info" now={20} className="mb-4" />
	<ProgressBar variant="warning" now={60} className="mb-4" />
	<ProgressBar variant="danger" now={80} className="mb-4" />
</>

Stacked​

Stacked progress bars do not support min/max props. They will only render from 0 to 100.

Result
Loading...
Live Editor
<ProgressBar>
	<ProgressBar variant="success" now={35} key={1} />
	<ProgressBar variant="warning" now={20} key={2} />
	<ProgressBar variant="danger" now={10} key={3} />
</ProgressBar>

Sizes​

Progress bars can be small, medium (default), or large.

Result
Loading...
Live Editor
<div data-testid="pw-progressbar-sizes">
	<ProgressBar now={60} size="sm" className="mb-4" />
	<ProgressBar now={60} size="md" className="mb-4" />
	<ProgressBar now={60} size="lg" className="mb-4" />
</div>

Props​