Bootstrap – Progress Bars

The purpose of progress bars is showing the progress of a task or action to the users. Bootstrap provides several types of progress bars. Note: Progress bars are not supported in Internet Explorer 9 and earlier (because they use CSS3 transitions and animations to achieve some of their effects).

Default Progress Bar

<div class="progress">
   <div class="progress-bar" style="width: 60%;">
     <span class="sr-only">60% Complete</span>
   </div>
</div>

 

Colored Progress Bars

Bootstrap also provides some emphasis utility classes for progress bars that can be further used to convey meaning through color.

The contextual classes that can be used with progress bars are:

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

<div class="progress">
 <div class="progress-bar progress-bar-info" style="width: 30%">
 <span class="sr-only">30% Used</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 50%">
 <span class="sr-only">50% Used</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning" style="width: 80%">
 <span class="sr-only">80% Used</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger" style="width: 90%">
 <span class="sr-only">90% Used</span>
 </div>
</div>

 

Striped Progress Bars

<div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" style="width: 20%">
      <span class="sr-only">20% Used</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-success" style="width: 40%">
     <span class="sr-only">40% Used</span>
   </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 80%">
     <span class="sr-only">80% Used</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 90%">
     <span class="sr-only">90% Used</span>
  </div>
</div>

 

Animated Progress Bar

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>
<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 50%;">      
      <span class = "sr-only">50% Complete</span>
   </div>
</div>
<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 80%;">      
      <span class = "sr-only">80% Complete</span>
   </div>
</div>
<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">      
      <span class = "sr-only">90% Complete</span>
   </div>
</div>

 

Stacked Progress Bar

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:30%">
    Free 
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:20%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:25%">
    Danger
  </div>
</div>