W3cubDocs

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

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.

const now = 60;

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

render(progressInstance);

Screenreader only label

Add a srOnly prop to hide the label visually.

const now = 60;

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

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>

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>

Animated

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

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

API

ProgressBar

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
srOnly	boolean	`false`	Hide's the label visually.
striped	boolean	`false`	Uses a gradient to create a striped effect.
variant	`'success'` \| `'danger'` \| `'warning'` \| `'info'`		Sets the background class of the progress bar.
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.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/progress/