Bootstrap Progress Bars

Progress bars display progress of a certain tasks to users. For instance if user has requested to download a page, a progress bar can display the percentage of file downloaded from the server. Bootstrap contains classes that can be added to div elements to create a customized progress bar. There are multiple types of bootstrap progress bars i.e. success, info, warning and danger type.

To create a progress bar in bootstrap, add “progress” class to the outer div. Inside that div, create another div and add class of “progress-bar” to it. Also add a role attribute and assign it value “progressbar”. Add three attributes aria-valuemin, aria-valuemax and aria-valuenow attribute as well; the contain the maximum, minimum and current value of the progress bar. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

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

</html>

Download the code
Try the code

If you open the above page, you should see a progress bar with 50% progress. The completed progress is defined by adding width attribute to the inline style of the element.

Let’s have a look at the example of success, warning, info and danger progress bars. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
         <div class="progress">
          <div class="progress-bar-success" role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width:50%">
            50% Success
          </div>
        </div>
        
         <div class="progress">
          <div class="progress-bar-info" role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width:50%">
            50% Complete
          </div>
        </div>
        
        
         <div class="progress">
          <div class="progress-bar-warning" role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width:50%">
            50%! Warning!
          </div>
        </div>
        
         <div class="progress">
          <div class="progress-bar-danger" role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width:50%">
            50%, Virus Ahead, Want to Continue?
          </div>
        </div>
    </body>

</html>

Download the code
Try the code

If you open the above page in the browser, you should see green, blue, yellow and red progress bars. They correspond to success, info, warning and danger. To use these progress bars progress-bar-success, progress-bar-info, progress-bar-warning and progress-bar-danger classes have been added to the div.

Stripped and Animated Bootstrap Progress Bars

You can also create stripped and animated progress bar. A stripped progress bar has strips in the background while an animated progress bar has animated strips. To create a stripped progress bar, add class “progress-bar-striped” to the default progress bars. Similarly to create animated progress bar add class “progress-bar-striped” and “active” to the default progress bar. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

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

</html>

Download the code
Try the code

<<< Bootstrap Badges And LabelsBootstrap Pagination >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .