<link rel="stylesheet" href="https://esm.sh/@erikt/ui/progress.css" />Default
<progress value="40" max="100"></progress>Indeterminate
Omit the value attribute to show an indeterminate state.
<progress></progress>Round
Add .round for a ring that fills clockwise from the
top. It is 2em wide, so it follows the font size. Set
width to make it bigger, and --thickness
for a thicker ring.
<progress class="round" value="25" max="100"></progress>
<progress class="round" value="65" max="100"></progress>
<!-- indeterminate, bigger and thicker -->
<progress class="round" style="width: 3em; --thickness: 0.375em"></progress>
The ring reads value and max with typed
attr(). Browsers without it need the fill as
--value, from 0 to 1.
<progress class="round" value="65" max="100" style="--value: 0.65"></progress>Labeled
Wrap in a <label class="field"> to pair with a text label.
<label class="field">
<span>Uploading…</span>
<progress value="65" max="100"></progress>
<small>65%</small>
</label>
<label class="field">
<span>Processing</span>
<progress></progress>
</label>