# Progress bars Progress

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

# Basic example

Default progress bar.


            const progressInstance = (
              <Progress value={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 value = 60;

            const progressInstance = (
              <Progress value={value} label={`${value}%`} />
            );

            
          

# Screenreader only label

Add a srOnly prop to hide the label visually.


            const value = 60;

            const progressInstance = (
              <Progress value={value} label={`${value}%`} srOnly />
            );

            
          

# Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles. You can either pass in shortcut attributes like success, info, warning, danger or use bsStyle attribute to control the contextual styles.


            const progressInstance = (
              <div>
                <Progress success value={40} />
                <Progress info value={20} />
                <Progress bsStyle="warning" value={60} />
                <Progress bsStyle="danger" value={80} />
              </div>
            );

            
          

# Striped

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


            const progressInstance = (
              <div>
                <Progress striped success value={40} />
                <Progress striped info value={20} />
                <Progress striped warning value={60} />
                <Progress striped danger value={80} />
              </div>
            );

            
          

# Animated

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


            const progressInstance = (
              <Progress active value={45} />
            );

            
          

# Stacked

Nest <Progress />s to stack them.


            const progressInstance = (
              <Progress>
                <Progress striped bsStyle="success" value={35} />
                <Progress bsStyle="warning" value={20} />
                <Progress active bsStyle="danger" value={10} />
              </Progress>
            );

            
          

# Props

NameTypeDefaultDescription
activebooleanfalse
bsClassstring'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.
bsStyleone of: "success", "warning", "danger", "info"Component visual or contextual style variants.
successbooleanfalseSuccess contextual style.
infobooleanfalseInfo contextual style.
warningbooleanfalseWarning contextual style.
dangerbooleanfalseDanger contextual style.
colorstring""Custom color for the progress indicator.
classNamestring
interpolateClassnode
labelnode
maxnumber100
minnumber0
valuenumber
srOnlybooleanfalse
stripedbooleanfalse
collapseBottombooleanfalseAdd a zero margin to the bottom of the rendered progress element.