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.

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function BasicExample() { return <ProgressBar now={60} />; } export default BasicExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function BasicExample() {
  return <ProgressBar now={60} />;
}

export default BasicExample;

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.

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function WithLabelExample() { const now = 60; return <ProgressBar now={now} label={`${now}%`} />; } export default WithLabelExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function WithLabelExample() {
  const now = 60;
  return <ProgressBar now={now} label={`${now}%`} />;
}

export default WithLabelExample;

Screenreader only label

Add a visuallyHidden prop to hide the label visually.

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function ScreenreaderLabelExample() { const now = 60; return <ProgressBar now={now} label={`${now}%`} visuallyHidden />; } export default ScreenreaderLabelExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function ScreenreaderLabelExample() {
  const now = 60;
  return <ProgressBar now={now} label={`${now}%`} visuallyHidden />;
}

export default ScreenreaderLabelExample;

Contextual alternatives

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

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function ContextualExample() { return ( <div> <ProgressBar variant="success" now={40} /> <ProgressBar variant="info" now={20} /> <ProgressBar variant="warning" now={60} /> <ProgressBar variant="danger" now={80} /> </div> ); } export default ContextualExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function ContextualExample() {
  return (
    <div>
      <ProgressBar variant="success" now={40} />
      <ProgressBar variant="info" now={20} />
      <ProgressBar variant="warning" now={60} />
      <ProgressBar variant="danger" now={80} />
    </div>
  );
}

export default ContextualExample;

Striped

Uses a gradient to create a striped effect.

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function StripedExample() { return ( <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> ); } export default StripedExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function StripedExample() {
  return (
    <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>
  );
}

export default StripedExample;

Animated

Add animated prop to animate the stripes right to left.

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function AnimatedExample() { return <ProgressBar animated now={45} />; } export default AnimatedExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function AnimatedExample() {
  return <ProgressBar animated now={45} />;
}

export default AnimatedExample;

Stacked

Nest <ProgressBar />s to stack them.

Result

Loading...

Live Editor

import ProgressBar from 'react-bootstrap/ProgressBar'; function StackedExample() { return ( <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> ); } export default StackedExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function StackedExample() {
  return (
    <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>
  );
}

export default StackedExample;

API

ProgressBar