Bootstrap 3 Progress bars

The progress bar component in web pages

You may need progress bars on web pages for different reasons, for example, showing the progress of uploading a file and letting the user know by way of progress bar that shows the percentage of the file being uploaded.

Update: Bootstrap 5 Progress bar tutorial is live.

Similarly, downloading a file, showing the progress of a long task that may involve saving the information in different databases on different servers, etc.

In this tutorial, the Bootstrap based progress bars are created that you may integrate into your web pages quite easily. Functionality-wise, it is up to you how to handle it.

A demo of progress bar Bootstrap with label

The bootstrap has a few built-in classes for creating the progress bars. You simply need to use the progress class in the main div containing progress bar. In the inner div, use the progress-bar class where you may specify different attributes including the label that shows the current progress value. Have a look:

bootstrap progress bar

The simple markup used for creating the progress bar using Bootstrap classes:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  
</head>
 
<body>
<div class="container">
<h3>A demo of progress bar using Bootstrap</h3>
    <div class="row">
        <div class="col-md-4">
        <div class="progress">
          <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
            45%
          </div>
        </div>

       </div>
      </div>

</div>
</body>
 
</html>

I used progress-bar-danger class to show the red color for the progress.

Using warning color in progress bar demo

In this demo, the progress-bar-warning class is used for creating the “yellowish” color bar. Basically, this is just like the button or alert classes used for different colors, have a look:

bootstrap progress bar warning

The markup:

<div class="container">

<h3>A demo of progress bar using Bootstrap</h3>

    <div class="row">

        <div class="col-md-4">

        <div class="progress">

          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">

            65%

          </div>

        </div>

 

       </div>

      </div>

 

</div>

Similarly, you may use the progress-bar-info for the light blue color, progress-bar-success for the green etc. The default is primary color i.e. blue.

A demo of creating a stripped progress bar

In this demo, a striped progress bar is created by using the built-in progress-bar-striped class along with progress-bar and progress-bar-info classes.

bootstrap progress bar striped

The markup:

<div class="container">

<h3>A demo of striped progress bar</h3>

    <div class="row">

        <div class="col-md-4">

        <div class="progress">

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

            70% done

          </div>

        </div>

       </div>

      </div>

 

</div>

The striped bar style is accomplished by using the gradient.

A demo of the animated and striped progress bar

By adding the .active class in the above demo of the striped progress bar, you may create an animated progress bar as shown below:

bootstrap progress bar animated

The code:

<div class="container">

<h3>A demo of animated progress bar</h3>

    <div class="row">

        <div class="col-md-4">

        <div class="progress">

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

            70% done

          </div>

        </div>

       </div>

      </div>

 

</div>

You can see, the animation from right to left in the progress bar.

A demo of multi-colored progress bar

By using multiple progress bars within the main div containing the progress class, you may create multi-color progress bar by using Bootstrap. Have a look at the following demo where I used info, danger, and success colors for creating a progress bar with a simple and striped style by using the active class:

bootstrap progress bar colors

The code:

<div class="container">

<h3>A demo of multi-color progress bar</h3>

    <div class="row">

        <div class="col-md-4">

        <div class="progress">

 <div class="progress-bar progress-bar-info" style="width: 20%">

    20%

  </div>

  <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 30%">

    30% Complete

  </div>

  <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%">

    40%

  </div>

        </div>

       </div>

      </div>

 

</div>

A demo of progress bar with box-shadow

In this demo, the box-shadow property of CSS is used for the container of the progress bar. Apart from that, a few built-in properties of Bootstrap are overridden for the customization of the progress bar. For example, the properties of the progress class are changed along with the active class. The animation property of CSS is also used for showing the progress in three seconds duration.

Have a look and get the complete code from the demo page:

bootstrap progress box shadow

The CSS used in example:

.prog-container{

    background: #DDEEEE;

    border-radius: 40px;

    padding: 23px;

    margin: 10px 0;

    box-shadow: 0 0  5px #8CB4D7;

}

.progress{

    height: 30px;

    margin: 0;

    overflow: visible;

    border-radius: 50px;

    background: #eaedf3;

    box-shadow: inset 0 10px  10px rgba(220, 223, 239,0.6);

}

.progress .progress-bar{

    border-radius: 10px;

}

.progress .current-prog-val{

    position: relative;

    left: -65px;

    top: 4px;

    font-size: 16px;

    color: #FF8040;

    font-weight:800;

}

.progress-bar.active{

    animation: reverse progress-bar-stripes 0.40s ease-in, animate-positive 3s;

}

@-webkit-keyframes animate-positive{

    0% { width: 0%; }

}

@keyframes animate-positive {

    0% { width: 0%; }

}

The markup:

<div class="container">

    <div class="row">

        <div class="col-md-6">

            <div class="prog-container">

                <div class="progress">

                    <div class="progress-bar progress-bar-primary progress-bar-striped active" style="width:60%; box-shadow:-1px 10px 10px rgba(91, 192, 222, 0.7);"></div>

                    <div class="current-prog-val">60%</div>

                </div>

            </div>

 

        </div>

    </div>

</div>

 

 

 

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