Bootstrap - Progress Bars

This chapter discusses about Bootstrap progress bars. The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Default Progress Bar

To create a basic progress bar −

• Add a <div> with a class of .progress.
• Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
• Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Let us see an example below −

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Alternate Progress Bar

To create a progress bar with different styles −

• Add a <div> with a class of .progress.
• Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.
• Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Let us see an example below −

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Striped Progress Bar

To create a striped progress bar −

• Add a <div> with a class of .progress and .progress-striped.
• Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.
• Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

Let us see an example below −

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Animated Progress Bar

To create an animated progress bar −

• Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped.
• Next, inside the above <div>, add an empty <div> with a class of .progress-bar.
• Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.

This will animate the stripes right to left.
Let us see an example below −

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

Stacked Progress Bar

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them as seen in the following example −

<div class = "progress">
   
   <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 class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>