React Bootstrap Progress Bar

React Progress Bar - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

React Bootstrap progress bar is a component which displays a progress of a process in which user is involved. Their color, shape, and animation can be customized.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”

Default progress bar

Default styling for React Bootstrap Progress Bar component





        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress value={0} className="my-2" />
              <MDBProgress value={25} className="my-2" />
              <MDBProgress value={50} className="my-2" />
              <MDBProgress value={75} className="my-2" />
              <MDBProgress value={100} className="my-2" />
            </>
          );
        }

        export default ProgressBarPage;

MDB Pro component

Material Design styling for React Bootstrap Progress Bar component

        
            
          import React from "react";
          import { MDBProgress } from 'mdbreact';
          const ProgressBarPage = () => {
            return (
              <>
                <MDBProgress material value={0} className="my-s" />
                <MDBProgress material value={25} className="my-s" />
                <MDBProgress material value={50} className="my-s" />
                <MDBProgress material value={75} className="my-s" />
                <MDBProgress material value={100} className="my-s" />
              </>
            );
          }
          export default ProgressBarPage;

Height

Manipulate height of the bar with height property.

Material progress bar MDB Pro component 

        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress material value={25} height="20px" />
            </>
          );
        }

        export default ProgressBarPage;

Labels

Add labels to your progress bars by placing text as a child of <Progress>.

Material progress bar MDB Pro component

25%
        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress material value={25} height="20px">
                25%
              </MDBProgress>
            </>
          );
        }

        export default ProgressBarPage;

Contextual alternatives

Progress bars use some of the same button and alert props, like color for consistent styles.

Contextual alternatives of progress bar MDB Pro component 

        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress className="my-2" material value={25} color="success" />
              <MDBProgress className="my-2" material value={50} color="info" />
              <MDBProgress className="my-2" material value={75} color="warning" />
              <MDBProgress className="my-2" material value={100} color="danger" />
            </>
          );
        }

        export default ProgressBarPage;

Striped

Add property striped to apply a stripe via CSS gradient over the progress bar’s background color.

Striped progress bar MDB Pro component 

        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress material value={50} striped />
            </>
          );
        }

        export default ProgressBarPage;

Animated stripes

The striped gradient can also be animated. Add property animated to animate the stripes right to left via CSS3 animations.

Animated progress bar MDB Pro component 

        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress material value={50} animated />
            </>
          );
        }

        export default ProgressBarPage;

Prealoaders

You can use Prgoress bar as infinite animated preloader. Just add property preloader to material progress bar. You can combine it with colors.

Infinite loading MDB Pro component 

        
            
        import React from "react";
        import { MDBProgress } from 'mdbreact';

        const ProgressBarPage = () => {
          return (
            <>
              <MDBProgress material preloader />
            </>
          );
        }

        export default ProgressBarPage;

React Progress Bar - API

In this section you will find advanced information about the Progress component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Import statement

        
            
          import { MDBProgress } from 'mdbreact';

API Reference: Progress Properties

The table below shows the configuration options of the MDBProgress component.

Name Type Default Description Example
animated Boolean false Turns on CSS3 animation effect with moving gradient <MDBProgress animated />
barClassName String Adds custom classes to colorful bar <MDBProgress barClassName="customClass" />
className String Adds custom classes to bar wrapper <MDBProgress className="customClass" />
color String indigo Changes bar color; accepts MDB predefined color classes <MDBProgress color="success" />
height String 0.25rem Sets custom height of the bar <MDBProgress height="50px" />
material Boolean false Switch on material design styling <MDBProgress material />
max Number 100 Sets maximum value of progress bar <MDBProgress max={200} />
min Number 0 Sets minimum value of progress bar <MDBProgress min={50} />
preloader Boolean false Switch on preloader mode - infinite animation <MDBProgress preloader />
striped Boolean false Adds striped effect as bar's background - uses CSS3 gradient <MDBProgress striped />
wrapperStyle Object {} Sets additional inline styles for bar's wrapper <MDBProgress wrapperStyle={{width: "50%"}} />
value Number 0 Sets current value of progress bar <MDBProgress value={40} />