This section is part of the premium version of the MDB framework.

Progress Bar

A progress bar can be used to show a user how far along he/she is in a process. MDBootstrap provides several types of progress bars.

Basic Progress Bar


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

Colored Progress Bars

The contextual classes colors of the progress bars:

Success

40% Complete (success)


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

Info


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

Warning

60% Complete (warning)


<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:80%">
  </div>
</div>

Danger

70% Complete (danger)


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

Striped Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:


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

Animated Progress Bar

The .active class animates the progress bar:


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

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class .progress:


<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
  </div>
</div>

Loading Progress Bars

The .progress-bar-animated class will add effect of fulfilling the bar until certain threshold (refresh page (F5) to observe animation)


<div class="progress">
  <div class="progress-bar progress-bar-striped active progress-bar-animated " role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"  role="progressbar">
  </div>
</div>

First value

Second value

Third value

Fourth value

Fifth value

Preloaders:

See page preloader in action

Live preview

If you want to include page preloader in your website follow these simple steps:

1. Link preloader css file (it's part of your downloaded MDB package)

   
 <link href="preloader/preloader.css" rel="stylesheet">

2.Right after opening <body> tag place the following html code:


     <div id="preloader">
        <div class="verticalcenter">
            <div class="text-center">
                <div id="status">
                    <h4 class="white-text">Just a second...</h4>
                </div>
            </div>
        </div>
    </div>

3. In scripts section directly bellow jQuery link include followng javascript code:

   
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- Preloader -->
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            $('#status').load("preloader/preloader.html", function () {
                $('#preloader').delay(2500).fadeOut('slow');
                $('body').delay(2500).css({
                    'overflow': 'visible'
                });
            });
        });
        //]]>
    </script>

3. If you want to change your preloader go to preloader/preloader.html and replace html code.

Infinite loading

Create infinite loading animation using indeterminate class:

   
<div class="progress">
  <div class="indeterminate" style="width: 70%"></div>
</div>

Circle

With MDB you can create beautifull circle loading animation. By default they are coming in different colors (spinner-blue-only) and size (big):

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

Crazy circle

Make some variations to achieve even more awesome effects:


   <div class="preloader-wrapper big active">
     <div class="preloader-wrapper big active">
     <div class="preloader-wrapper big active">
   <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>
  </div>
  </div>
  </div>

Multicolor

Don't limit yourself to single color, you can easily combine them.

 

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