Bootstrap - Progress bars

19RH1A05H6 Thanvi lahari Pendyala
Last Updated: May 13, 2022

Introduction

Bootstrap has a feature - progress bar to indicate that the assets are loading or in progress or an action taking place. The progress bars can also be used as a timer bar to indicate the time running. Let’s take a look at a few progress bars with their corresponding codes.

Progress bars

The progress bar can be created using the classes .progress to make the bar's outline and .progress-bar to fill the progress inside the bar with a certain width.

Default progress bar

To create a default progress bar:

  1. Add a <div> container with a class .progress
  2. Add another <div> with a class .progress-bar nested inside the previous <div>.
  3. Add the width as style=”width: X%” to create a bar with width of X%.
  4. Specify the colour, label, and height of the bar(optional).
     
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>A progress bar without any progress or 0% width</p>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>A progress bar with 25% width</p>
</body>
</html>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<p>A progress bar with 25% width and a label</p>

Progressbar with background colors

To create a progress bar with different background colors we have to add the classes .progress and .progress-bar just like we do for a default bar. We also add fews contextual classes for background color in bootstrap like:

  1. .progress-bar-succes
  2. .progress-bar-info
  3. .progress-bar-warning
  4. .progress-bar-danger


These are the only contextual classes that can be used with progress bars. 

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

Striped progress bar

To create a striped progress bar, we add a class .progress-bar-striped to create a striped pattern inside the bars. We can also add contextual classes to produce a striped bar with a background color.

<p>The .progress-bar-striped class adds stripes to the progress bars</p> 
<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated progress bars

The animation effect can be introduced to a progress bar by adding the classes .progress-bar-striped and .progress-bar-animated or .active class based on a few compilers and the version of bootstrap you are using.

<p>The .active class animates the progress bar</p> 
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Click here to see the progress bar animate in the online editor.

Multiple progress bars

The progress bars need not be in a single color completely. We can also create them stacked with different colors in a single bar. We have to add the <div> container with .progress-bar and .progress-bar-color inside a single <div> with .progress class.

<p>Multiple stacked bars</p>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar progress-bar-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Frequently Asked Questions

  1. What is a progress bar?
    A progress bar is a graphical way of representing your progress, like - how far a process is done or assets loading or time.
     
  2. How do I customize a bootstrap progress bar?
    A bootstrap bar can be customized according to the size and color you wand either by giving inline or external CSS or contextual bootstrap classes to fill the background colors.
     
  3. How do I make my bootstrap progress bar dynamic?
    The bars we have discussed so far are static and dynamic bars require a better understanding and implementation of Javascript or typescript. The developer can code a function in any scripting language and integrate it with HTML code to make a progress bar dynamic.
     
  4. How do you animate a progress bar?
    We can animate a progress bar by adding the classes .progress-bar-striped and .progress-bar-animated or .active. But to make the animation dynamic or toggle-able, a javascript function is a must.

Key Takeaways

Let’s discuss the article in brief again:

  • The bootstrap progress bars are a graphical way of representing your progress, like - how far a process is done or assets loading or time.
  • A progress bar can be created using .progress and .progress-bar classes within nested <div> containers.
  • The progress bars can be colored, striped, animated, and made dynamic too, according to the user's requirements.
     

Hey Ninjas! Web development is an interesting technology, right? If you want to become an expert in web development, we suggest you go through the best course we have found you.
 

Happy Learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think