Bootstrap | Progress Bars

Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about Bootstrap progress bars.

The purpose of progress bar is to show that assets are loading, in progress or that there is an action happening regarding elements on the page.

Progress bars uses CSS3 transitions and animations to obtain some of their effects. These features aren't supported in Internet Explorer(IE)9 and below or older versions of Firefox. Opera 12 does not have support for animations.

Default Progress Bar

To create a basic progress bar -

• Add a <div> with a .progress class.

• Next, inside the above <div>, add an empty <div> with a .progress-bar class.

• Finally add a style attribute with the width expressed as a percentage. For example, style ="60%"; shows that the progress bar is at 60%.

Example

Following example demonstrates this -

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

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Alerts

Alternate Progress Bar

To create a progress bar that has a different styling -

• Add a <div> with a class of .progress

• Inside the above <div>, add an empty <div> with a .progress-bar class and class .progress-bar-* where * could be success, info, warning, danger.

• Finally add a style attribute with the width expressed as a percentage. For example style ="60%"; shows that the progress bar was at 60%.

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Striped Progress Bar

To create a striped progress bar -

• Add a <div> with a class of .progress and .progress-striped

• Inside the above <div>, add an empty <div> with a .progress-bar class and class .progress-bar-* where * could be success, info, warning, danger.

• Finally add a style attribute with the width expressed as a percentage. For example style ="60%"; shows that the progress bar was at 60%.

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Thumbnails

Animated Progress Bar

To create an animated progress bar -

• Add a <div> with a .progress class and a .progress-striped class. Also add a class of .active to .progress-striped.

• Inside the above <div>, add an empty <div> with a .progress-bar clas.

• Finally add a style attribute with the width expressed as a percentage. For example style ="60%"; shows that the progress bar was at 60%.

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Stacked Progress Bar

You can even stack multiple progress bars. Place the multiple progress bars into same .progress class to stack them.

Example

Following below is a simple 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>

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Labels

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Media Object.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.