WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Progress Bars


Basic Progress Bar

The progress bar can show the completion of the user's task.

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

  • Add one with the .progress class <div>。
  • Then, on the <div> Inside, add an empty one with class .progress-bar <div>。
  • Add a style attribute with a width expressed as a percentage, for example, style = "width: 70%" indicates that the progress bar is at 70% .
30% Complete
The height of the progress bar is 16px by default. We can use CSS's height property to modify it:

We can create a default progress bar,by adding this code .progress class to a <div> element:

Example

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    <span class="sr-only">30% Complete</span>
  </div>
</div>

Progress Bar With Label

A progress bar with a label work this:

30%

You can add text in the progress bar, such as the percentage of progress:

Example

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30"
  aria-valuemin="0" aria-valuemax="100" style="width:30%">
    30%
  </div>
</div>
Try it Yourself »

Colored Progress Bars

Contextual classes define to provide "meaning through colors".

Mainly contextual classes that can be used with progress bars are:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
20% Complete (success)
40% Complete (info)
80% Complete (warning)
100% Complete (danger)

The below example will help to understand how to create progress bars with the various contextual classes:

Example

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

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

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

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

Striped Progress Bars

Progress bars can also be striped:

20% Complete (success)
40% Complete (info)
55% Complete (warning)
95% Complete (danger)

Add class .progress-bar-striped to add stripes to the progress bars:

Example

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

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

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

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width:95%">
    95% Complete (danger)
  </div>
</div>
Try it Yourself »

Animated Progress Bar

Example "animated" progress bar:

25%

Add class .active to animate the progress bar:

Example

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%">
    25%
  </div>
</div>
Try it Yourself »

Mixed color progress bar

You can use the .progress-bar-striped class to set the striped progress bar:

Free Space
Warning
Danger

Create a stacked progress bar by placing multiple bars into the same <div class="progress">:

Example

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:45%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:20%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:95%">
    Danger
  </div>
</div>
Try it Yourself »