Progress bars

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Example

Default progress bar.

<ProgressBar now={60} />

<ProgressBar now={60} />

With label

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.

60%

const now = 60;

const progressInstance = <ProgressBar now={now} label={`${now}%`} />;

render(progressInstance);

const now = 60;
const progressInstance = <ProgressBar now={now} label={`${now}%`} />;
render(progressInstance);

Screenreader only label

Add a visuallyHidden prop to hide the label visually.

const now = 60;

const progressInstance = (
  <ProgressBar now={now} label={`${now}%`} visuallyHidden />
);

render(progressInstance);

const now = 60;
const progressInstance = (
  <ProgressBar now={now} label={`${now}%`} visuallyHidden />
);
render(progressInstance);

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<div>
  <ProgressBar variant="success" now={40} />
  <ProgressBar variant="info" now={20} />
  <ProgressBar variant="warning" now={60} />
  <ProgressBar variant="danger" now={80} />
</div>

<div>
  <ProgressBar variant="success" now={40} />
  <ProgressBar variant="info" now={20} />
  <ProgressBar variant="warning" now={60} />
  <ProgressBar variant="danger" now={80} />
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE8.

<div>
  <ProgressBar striped variant="success" now={40} />
  <ProgressBar striped variant="info" now={20} />
  <ProgressBar striped variant="warning" now={60} />
  <ProgressBar striped variant="danger" now={80} />
</div>

<div>
  <ProgressBar striped variant="success" now={40} />
  <ProgressBar striped variant="info" now={20} />
  <ProgressBar striped variant="warning" now={60} />
  <ProgressBar striped variant="danger" now={80} />
</div>

Animated

Add animated prop to animate the stripes right to left. Not available in IE9 and below.

<ProgressBar animated now={45} />

<ProgressBar animated now={45} />

Stacked

Nest <ProgressBar />s to stack them.

<ProgressBar>
  <ProgressBar striped variant="success" now={35} key={1} />
  <ProgressBar variant="warning" now={20} key={2} />
  <ProgressBar striped variant="danger" now={10} key={3} />
</ProgressBar>

<ProgressBar>
  <ProgressBar striped variant="success" now={35} key={1} />
  <ProgressBar variant="warning" now={20} key={2} />
  <ProgressBar striped variant="danger" now={10} key={3} />
</ProgressBar>

API

ProgressBarview source file

import ProgressBar from 'react-bootstrap/ProgressBar'

Name	Type	Default	Description
animated	boolean	`false`	Animate's the stripes from right to left
children	onlyProgressBar		Child elements (only allows elements of type )
isChild	boolean	`false`
label	node		Show label that represents visual percentage. EG. 60%
max	number	`100`	Maximum value progress can reach
min	number	`0`	Minimum value progress can begin from
now	number		Current value of progress
striped	boolean	`false`	Uses a gradient to create a striped effect.
variant	`'success'` \| `'danger'` \| `'warning'` \| `'info'`		Sets the background class of the progress bar.
visuallyHidden	boolean	`false`	Hide's the label visually.
bsPrefix	string	`'progress-bar'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Progress bars#

Example#

With label#

Screenreader only label#

Contextual alternatives#

Striped#

Animated#

Stacked#

API#

ProgressBar#view source file