Register

Progress

How far something has come

Bars

With the figure as text, so the bar is not the only sign.

Monthly sales target72%
Storage used12.04 of 25 GB
Riverside refit budget$14,250 of $38,000
Show the code
<div class="stack w-100">
<div class="progress-row">
<div class="spread">
<span>Monthly sales target</span>
<span class="num">72%</span>
</div>
<div class="progress" role="progressbar" aria-label="Monthly sales target" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="--value:72.0%">
<span>
</span>
</div>
</div>
<div class="progress-row">
<div class="spread">
<span>Storage used</span>
<span class="num">12.04 of 25 GB</span>
</div>
<div class="progress" role="progressbar" aria-label="Storage used" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="--value:48.2%">
<span>
</span>
</div>
</div>
<div class="progress-row">
<div class="spread">
<span>Riverside refit budget</span>
<span class="num">$14,250 of $38,000</span>
</div>
<div class="progress warning" role="progressbar" aria-label="Riverside refit budget" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="--value:37.5%">
<span>
</span>
</div>
</div>
</div>

Rings

For a single figure on a dashboard.

72%Count done94%On time38%Budget
Show the code
<span class="stack tight place-center">
<span class="ring" style="--value: 72; --c: var(--accent)" role="img" aria-label="Count done: 72%">
<b>72%</b>
</span>
<span class="fs-sm muted">Count done</span>
</span>
<span class="stack tight place-center">
<span class="ring" style="--value: 94; --c: var(--green-500)" role="img" aria-label="On time: 94%">
<b>94%</b>
</span>
<span class="fs-sm muted">On time</span>
</span>
<span class="stack tight place-center">
<span class="ring" style="--value: 38; --c: var(--amber-400)" role="img" aria-label="Budget: 38%">
<b>38%</b>
</span>
<span class="fs-sm muted">Budget</span>
</span>

Steps

Where a long task is.

  1. 1. Upload
  2. 2. Match
  3. 3. Import
Show the code
<ol class="steps w-100">
<li class="done">1. Upload</li>
<li aria-current="step">2. Match</li>
<li>3. Import</li>
</ol>