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