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.

    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%

    Screenreader only label

    Add a visuallyHidden prop to hide the label visually.

    60%

    Contextual alternatives

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

    Striped

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

    Animated

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

    Stacked

    Nest <ProgressBar />s to stack them.

    API

    import ProgressBar from 'react-bootstrap/ProgressBar'Copy import code for the ProgressBar component
    NameTypeDefaultDescription
    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.