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>
50% Complete

 

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>
30% Used
50% Used
80% Used
90% Used

 

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>
20% Used
40% Used
80% Used
90% Used

 

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>
40% Complete
50% Complete
80% Complete
90% Complete

 

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>
Free
Warning
Danger

One thought on “Bootstrap – Progress Bars

Leave a Reply

Your email address will not be published.

*