Bootstrap Progress Bar

This chapter will explain the Bootstrap progress bar. In this tutorial, you will learn how to use Bootstrap to create progress bars for loading, redirecting, or action states.

Default Progress Bar

The steps to create a basic progress bar are as follows:

• Add a <div> with the class .progress.
• Next, inside the above <div>, add an empty <div> with the class .progress-bar.
• Add a style attribute with a width expressed as a percentage, for example, style="width: 60%"; this indicates the progress bar is at 60%.

Let's look at the following example, where the .sr-only class can hide the text content:

Example

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

The result is shown below:

You can also set text content within the progress bar:

Example

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

The result is shown below:

Alternate Progress Bars

The steps to create different styled progress bars are as follows:

• Add a <div> with the class .progress.
• Next, inside the above <div>, add an empty <div> with the class .progress-bar and .progress-bar-*, where * can be success, info, warning, danger.
• Add a style attribute with a width expressed as a percentage, for example, style="60%"; this indicates the progress bar is at 60%.

Let's look at the following example:

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 (Success)</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>

The result is shown below:

Displaying progress bar text content:

Example

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </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:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>

The result is as follows:

Striped Progress Bars

Steps to create a striped progress bar:

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

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

• Add a style attribute with a percentage width, for example, style="60%" to indicate the progress bar at 60% position.

Here is an example:

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 (success)</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>

Result as shown below:

Animated Progress Bar

Steps to create an animated progress bar:

• Add a <div> with class .progress and .progress-striped, and also add class .active.

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

• Add a style attribute with a width expressed as a percentage, e.g., style="60%"; this indicates the progress bar is at 60%.

This will make the stripes appear to move from right to left.

Let's see the example below:

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>

Result as shown below:

Stacked Progress Bar

You can even stack multiple progress bars. Stack them by placing multiple bars into the same .progress, as shown in the example below:

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>

Result as shown below:

Progress Bar Size

We can set the size of the progress bar by using the height attribute:

Example

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Result as shown below: ```