Progress Bars

By default, the progressbar will be blue, but you can apply other colors as a class to the progress bar to use that color instead. For example: apply progress-bar-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange.

The progress bar can be 3 sizes. Default height is 6px. You can also add progress-md (15px) or progress-lg (21px) for larger progress bars.

If you would like the percentage to show, remove the span with the sr-only (Screen reader) class. Use the progress-md or progress-lg classes. It doesn't work well with the default height.

Base Progress Bar

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

Progress Bar Variations

40% Complete (success)
20% Complete (success)
60% Complete (success)
80% Complete (success)
100% Complete (success)
<div class="progress">
  <div class="progress-bar progress-bar-bright-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-black" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    <span class="sr-only">100% Complete (success)</span>
  </div>
</div>