WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Progress Bars


In this chapter we discuss basic progress bar

Basic Progress Bar

progress bar can be used how much to complete process.

Bootstrap supports many types of progress bars.

A default progress bar in Bootstrap look at this:

30% Complete

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%

Remove the .sr-only class from the progress bar to look a visible percentage:

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 »

Stacked Progress Bars

Progress bars can also be stacked:

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 »