Progress bar in Bootstrap 4

The progress bar component of Bootstrap 4 Framework is used for showing the update/progress of some task/action or process to the users. For example, when uploading a file, you may show it by way of a progress bar that how much of the file is uploaded.

Similarly, in your checkout process, you may display how many steps are completed by way of the progress bar. The progress bar can also be used for survey or voting results by filling the bars with percentages, besides many other uses.

In the next section, I will show you how to create a Bootstrap 4 progress bar by using its built-in classes and data attributes. The last example shows a progress bar in action by using jQuery.

A simple progress bar example

For creating a progress bar, use the .progress class in the container like <div>. Use the following data attributes for defining three values of the progress bar for accessibility:

  • aria-valuenow //For setting the current value e.g. 64%
  • aria-valuemin // Minimum value where the progress bar is starting
  • aria-valuemax //Maximum value

Have a look at an example below by using all these:

Bootstrap progress bar simple

The code:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div class="container">
<h3 class="text-success">A Demo of Porgress bar</h3>
<div class="progress">
  <div class="progress-bar w-50" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<h5 class="text-success">By style attribute</h5>
<div class="progress">
  <div class="progress-bar" style="width:64%" role="progressbar">64%</div>
</div>
</div>

</body>
</html>

In the first bar, the Bootstrap w-50 class is used to define the fill of progress bar. In the second bar, the style attribute is used inline. The second bar is created without any above-mentioned data attributes.

For displaying the value, just write the text in the <div> with .progress-bar class.

The default color of the progress bar is blue (primary). See next example of other available colors in Bootstrap 4.

Creating various color progress bars

By using the utility classes for background (bg-success, bg-info etc), you may create progress bars with different colors.

Have a look at the demo output below where I used all built-in background utility classes in the progress bars:

Bootstrap 4-progress colors

The markup:

<div class="container">

<h3 class="text-success">bg-info</h3>

<div class="progress">

  <div class="progress-bar bg-info w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">50%</div>

</div>

<h5 class="text-success">bg-success</h5>

<div class="progress">

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

</div>

<h5 class="text-success">bg-warning</h5>

<div class="progress">

  <div class="progress-bar bg-warning w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>

</div>

<h5 class="text-success">bg-danger</h5>

<div class="progress">

  <div class="progress-bar bg-danger" style="width:52%" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">52%</div>

</div>

<h5 class="text-success">bg-light</h5>

<div class="progress">

  <div class="progress-bar bg-light w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>

</div>

<h5 class="text-success">bg-dark</h5>

<div class="progress">

  <div class="progress-bar bg-dark" style="width:65%">65%</div>

</div>

<h5 class="text-success">bg-primary</h5>

<div class="progress">

  <div class="progress-bar bg-primary" style="width:77%" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">77%</div>

</div>

<h5 class="text-success">bg-secondary</h5>

<div class="progress">

  <div class="progress-bar bg-secondary" style="width:64%">64%</div>

</div>

</div>

Adding strips to progress bars example

Just add the .progress-bar-striped class for the progress bar with strips. Using the above bars, I have added .progress-bar-striped class and see the result:

Bootstrap 4 progress stripped

The code:

<div class="container">

<h3 class="text-success">bg-info</h3>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-info w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">50%</div>

</div>

<h5 class="text-success">bg-success</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-success" style="width:33%" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">33%</div>

</div>

<h5 class="text-success">bg-warning</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-warning w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>

</div>

<h5 class="text-success">bg-danger</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-danger" style="width:52%" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100">52%</div>

</div>

<h5 class="text-success">bg-light</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-light w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>

</div>

<h5 class="text-success">bg-dark</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped bg-dark" style="width:65%">65%</div>

</div>

<h5 class="text-success">bg-primary</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-primary" style="width:77%" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">77%</div>

</div>

<h5 class="text-success">bg-secondary</h5>

<div class="progress">

  <div class="progress-bar progress-bar-striped  bg-secondary" style="width:64%">64%</div>

</div>

</div>

Making striped bars animated example

Taking one step further, you may add the .progress-bar-animated class for creating a striped progress bar with animation. Take a look:

See online demo and code

One of the progress bar’s code:

<div class="progress">

  <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" style="width:65%">65%</div>

</div>

You may see the live demo and grab the complete code on the demo page.

The demo of multiple progress bars in a progress component

You may require showing various colors in the progress bar after reaching a certain progress level in a process. For example, as the 25% file is uploaded, show it as green. The next 25% as red then yellow and the last 25% is red.

You may achieve that by using a single progress component and creating multiple progress bars inside it. Have a look at the code and demo output:

Bootstrap 4 progress multiple

The code:

<div class="container">

<h3>Multiple progress bars demo</h3>

<div class="progress">

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

  <div class="progress-bar  progress-bar-striped bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>

  <div class="progress-bar  progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>

</div>

</div>

A demo of a dynamic progress bar

Let us give some action to the Bootstrap 4 progress bar with above-used classes. As you open the demo page, the progress bar will be loaded starting from 15% and progressing at 1% after every 100ms. Have a look at the demo page code online:

See online demo and code

The markup:

<div class="container">

<h3>Dynamic Progress bar</h3>

<div class="progress" style="height: 30px;">

  <div id="moving-progress-bar" class="progress-bar bg-info progress-bar-striped"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" ></div>

</div>

</div>

The script:

<script>

$(function() {

  var progressed = 15;

  var interval = setInterval(function() {

      progressed += 1;

      $("#moving-progress-bar")

      .css("width", progressed + "%")

      .attr("aria-valuenow", progressed)

      .text(progressed + "% progress");

      if (progressed >= 100)

          clearInterval(interval);

  }, 100);

});

</script>

You also need to include jQuery in order to make this dynamic progress bar work.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️