Progress
How far along something is
Bars
Code
<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="25%" style="--v: 25%"><span></span></div>
<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="50%" style="--v: 50%"><span></span></div>
<div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75%" style="--v: 75%"><span></span></div>
<div class="progress success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="100%" style="--v: 100%">
<span></span>
</div>Sizes and tones
Code
<div class="progress progress-sm" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Small" style="--v: 60%">
<span></span>
</div>
<div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Default" style="--v: 60%"><span></span></div>
<div class="progress progress-lg warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Large" style="--v: 60%">
<span></span>
</div>
<div class="progress danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="Danger" style="--v: 90%">
<span></span>
</div>Rings
32%
64%
91%
Code
<div class="progress-ring" style="--v: 32; --size: 80px; --ring-text: var(--fs-xl)" role="img" aria-label="32%"><span>32%</span></div>
<div class="progress-ring" style="--v: 64; --size: 80px; --ring-text: var(--fs-xl)" role="img" aria-label="64%"><span>64%</span></div>
<div class="progress-ring" style="--v: 91; --size: 80px; --ring-text: var(--fs-xl)" role="img" aria-label="91%"><span>91%</span></div>