Progress

Basic progress

Set value from 1–100 as a percentage. The fill width and its fill-in animation duration both scale with the value.

<progress value="25"></progress>
<progress value="60"></progress>
<progress value="90"></progress>

Height

Set an explicit height attribute to override the 5px default track thickness.

<progress value="70" style="height:10px"></progress>

Indeterminate / empty states

Leave value off entirely for a full, static track, or set it to an empty string for a barely-visible 1% sliver - useful as a "just started" state.

<!-- No value: fill renders at 100% -->
<progress></progress>

<!-- Empty value: fill renders at 1% -->
<progress value=""></progress>

Animation speed

The fill-in transition duration scales with value by default (10ms per point). Override the pacing with .speed-{10-100} to use a fixed per-point duration instead.

<progress value="80" class="speed-50"></progress>

Pure CSS. The fill bar is the element's own ::before pseudo-element, animated with a CSS animation-duration tied to value - no wrapper markup or script needed to show progress.