Rate this docs

React Bootstrap Progress Bar

React Progress Bar - Bootstrap 4 & Material Design

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






        <Progress value={0} />
        <Progress value={25} />
        <Progress value={50} />
        <Progress value={75} />
        <Progress value={100} />
      

MDB Pro component

Material Design styling for React Bootstrap Progress Bar component


        <Progress material value={0} />
        <Progress material value={25} />
        <Progress material value={50} />
        <Progress material value={75} />
        <Progress material value={100} />
      

Height

Manipulate height of the bar with height property.

Material progress bar MDB Pro component



        <Progress material value={25} height="20px" />

      

Labels

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

Material progress bar MDB Pro component

25%


        <Progress material value={25} height="20px">
          25%
        </Progress>

      

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



        <Progress material value={25} color="success" />
        <Progress material value={50} color="info" />
        <Progress material value={75} color="warning" />
        <Progress material value={100} color="danger" />

      

Striped

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

Striped progress bar MDB Pro component



        <Progress material value={50} striped/>

      

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



        <Progress material value={50} animated />

      

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



        <Progress material preloader />

      

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} />