Components

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

#Basic 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.

60%

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 bsStyle="success" now={40} />
  <ProgressBar bsStyle="info" now={20} />
  <ProgressBar bsStyle="warning" now={60} />
  <ProgressBar bsStyle="danger" now={80} />
</div>;

#Striped

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

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

#Animated

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

<ProgressBar active now={45} />;

#Stacked

Nest <ProgressBar />s to stack them.

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

#ProgressBar [source]

Name	Type	Default	Description
min	number	0
now	number
max	number	100
label	node
srOnly	boolean	false
striped	boolean	false
active	boolean	false
children	onlyProgressBar
bsStyle	one of: `"success"`, `"warning"`, `"danger"`, `"info"`		Component visual or contextual style variants.
bsClass	string	'progress-bar'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

Components

#Progress bars ProgressBar