Progress Bar

Bootstrap Progress Bar / Bootstrap loaders

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 huge 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.
upgrade with discount

The Bootstrap progress bar is a component which displays the progress of a process in which the 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 the Bootstrap Progress Bar component:





Edit in sandbox 
        
            
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <br>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

Material progress bar MDB Pro component

Material Design styling for the Bootstrap Progress Bar component:

Edit in sandbox 
        
            
        <div class="progress md-progress">
            <div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

  • We use the .progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
  • The .progress-bar also requires some role and aria attributes to make it accessible.

Height

You can set a height value on the .progress and .progress-bar.

Material progress bar MDB Pro component

Edit in sandbox 
        
            

        <div class="progress md-progress" style="height: 20px">
          <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

Labels

Easily add labels to your progress bars by placing text within the .progress-bar.

Material progress bar MDB Pro component

25%
Edit in sandbox 
        
            

          <div class="progress md-progress" style="height: 20px">
              <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
          </div>

Contextual alternatives

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

Contextual alternatives of progress bar MDB Pro component

Edit in sandbox 
        
            

        <div class="progress md-progress">
            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress md-progress">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

Striped

You can add .progress-bar-striped to any .progress-bar to apply a stripe via a CSS gradient over the progress bar’s background color.

Striped progress bar MDB Pro component

Edit in sandbox 
        
            

        <div class="progress md-progress">
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

Animated stripes

The striped gradient can also be animated. Just add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

Animated progress bar MDB Pro component

Edit in sandbox 
        
            

        <div class="progress md-progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

Preloaders

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

Infinite loading MDB Pro component

Edit in sandbox 
        
            

        <div class="progress md-progress primary-color-dark">
            <div class="indeterminate"></div>
        </div>

Circles

Use the border spinners for a lightweight loading indicator.

Basic circles MDB Pro component

Edit in sandbox 
        
            

        <!--Big blue-->
        <div class="preloader-wrapper big active">
          <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>

        <!--Medium red-->
        <div class="preloader-wrapper active">
          <div class="spinner-layer spinner-red-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>


        <!--Small yellow-->
        <div class="preloader-wrapper small active">
          <div class="spinner-layer spinner-yellow-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>

Crazy circles MDB Pro component

Edit in sandbox 
        
            

        <!--Big blue-->
        <div class="preloader-wrapper big active crazy">
          <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>

        <!--Medium red-->
        <div class="preloader-wrapper active crazy">
          <div class="spinner-layer spinner-red-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>


        <!--Small green-->
        <div class="preloader-wrapper small active crazy">
          <div class="spinner-layer spinner-green-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>

Multicolor MDB Pro component

Edit in sandbox 
        
            

        <div class="preloader-wrapper big active">
          <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>

Preloading script

Click the button below to see a Preloading Script in action

Preloading script MDB Pro component

Live demo

Usage

Immediately below opening the <body> tag, put the following code.

Edit in sandbox 
        
            

        <div id="mdb-preloader" class="flex-center">
            <div id="preloader-markup">
            </div>
        </div>

The script runs until your page is fully loaded.

To change the Preloader go to mdb-addons/preloader.html in the folder of your unzipped MDB package and replace the existing (default) code with the new Preloader.

Default code

Edit in sandbox 
        
            

        <div class="preloader-wrapper big active crazy">
          <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>