Progress
- src
- components
- progress.scss
Class list
- .progress
- .progress-bar
Description
Use a .progress to visually indicate how much progress has been made.
Structure
<div class="progress">
<div class="progress-bar" style="width: 65%;"></div>
</div>Multiple
Any number of .progress-bar elements can be put inside of a .progress.
<div class="progress">
<div class="progress-bar" style="width: 20%;"></div>
<div class="progress-bar primary" style="width: 30%;"></div>
<div class="progress-bar info" style="width: 40%;"></div>
</div>Font size scaling
Use the font size utility classes on a .progress to change its size.
<div class="progress h6 mb-half">
<div class="progress-bar" style="width: 20%;"></div>
</div>
<div class="progress mb-half">
<div class="progress-bar" style="width: 20%;"></div>
</div>
<div class="progress h2">
<div class="progress-bar" style="width: 20%;"></div>
</div>Themes
Use any of the provided theme classes on a .progress-bar to have that themes styles applied.
<div class="progress">
<div class="progress-bar primary" style="width: 15%"></div>
<div class="progress-bar info" style="width: 15%"></div>
<div class="progress-bar caution" style="width: 15%"></div>
<div class="progress-bar danger" style="width: 15%"></div>
<div class="progress-bar light" style="width: 15%"></div>
<div class="progress-bar dark" style="width: 15%"></div>
</div>