The 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, as uploading a file, you may show it by way of 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 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

See online demo and code

The markup:

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 online demo where I used all built-in background utility classes in the progress bars:

Bootstrap 4-progress colors

See online demo and code

The markup:

Adding strips to progress bars example

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

Bootstrap 4 progress stripped

See online demo and code

The code:

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:

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 use require showing various colors in the progress bar after reaching 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 last 25% as 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 online:

Bootstrap 4 progress multiple

See online demo and code

The code:

A demo of 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:

The script:

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