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>

Steps

Where a long task is.

1. Upload
2. Match
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>

Stacked

How a whole splits, with the shares named under it (Vuexy, DreamsPOS).

Payments by method, last 30 days

Show the code

<div class="stack w-100">
<div class="spread fs-sm">
<span>Payments by method, last 30 days</span>
</div>
<div class="progress stacked" role="img" aria-label="Payments by method: Card 61%, Cash 22%, Split 7%, Gift card 6%, Store credit 4%">
<span style="--value: calc(61% - 4px); --c: var(--accent)">
</span>
<span style="--value: calc(22% - 4px); --c: var(--green-500)">
</span>
<span style="--value: calc(7% - 4px); --c: var(--amber-400)">
</span>
<span style="--value: calc(6% - 4px); --c: var(--violet-500)">
</span>
<span style="--value: calc(4% - 4px); --c: var(--gray-400)">
</span>
</div>
<ul class="legend-row" aria-hidden="true">
<li>
<span class="tbl-dot" style="background: var(--accent); border-color: transparent">
</span>Card 61%</li>
<li>
<span class="tbl-dot" style="background: var(--green-500); border-color: transparent">
</span>Cash 22%</li>
<li>
<span class="tbl-dot" style="background: var(--amber-400); border-color: transparent">
</span>Split 7%</li>
<li>
<span class="tbl-dot" style="background: var(--violet-500); border-color: transparent">
</span>Gift card 6%</li>
<li>
<span class="tbl-dot" style="background: var(--gray-400); border-color: transparent">
</span>Store credit 4%</li>
</ul>
</div>