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} />;
    Press esc to disable tab trapping

    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);
    Press esc to disable tab trapping

    Screenreader only label

    Add a srOnly prop to hide the label visually.

    60%
    const now = 60;

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

render(progressInstance);
    Press esc to disable tab trapping

    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>;
    Press esc to disable tab trapping

    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>;
    Press esc to disable tab trapping

    Animated

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

    <ProgressBar animated now={45} />;
    Press esc to disable tab trapping

    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>;
    Press esc to disable tab trapping

    API

    ProgressBarview source file

    import ProgressBar from 'react-bootstrap/ProgressBar'
    NameTypeDefaultDescription
    animated
    boolean
    		false

    Animate's the stripes from right to left

    children
    onlyProgressBar

    Child elements (only allows elements of type )

    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.