You give it a value and an optional label. The page draws a bar with the percentage. Values outside the range are clamped for display, and the raw value still reads as text without JavaScript.
A progress bar for one number between 0 and 1.
You give it a value and an optional label. The page draws a bar with the percentage. Values outside the range are clamped for display, and the raw value still reads as text without JavaScript.
required, canonical unit 0..1. Out-of-range values clamp for rendering; the raw attr stays untouched (machine readers see the author's value, the render shows the clamp).optional meter caption;optional completion state — pairs with value 1 and renders the full/accent state (same catalog as `sem-step`).per the global attribute catalog (conventions.md §2)per the global attribute catalog (conventions.md §2)per the global attribute catalog (conventions.md §2)
Live render boots with JavaScript — the authored source is alongside.
variant: default label
No `label` authored: the caption names itself — `progress :: 42%`. The runtime default applies in every tier; JS-off the CSS `attr()` caption reads the same default. ARIA is unchanged: `role="meter"` with `aria-valuenow` = the authored value.
Live render boots with JavaScript — the authored source is alongside.
variant: out-of-range value clamps
`value="1.4"` is outside the canonical 0..1: the render clamps to 100% while the raw attribute — and `aria-valuenow`, which assistive tech reads — stay exactly as authored. JS-off the caption shows the raw `1.4` too: the render clamps, the data never lies.
Live render boots with JavaScript — the authored source is alongside.
variant: status="done"
`status="done"` pairs with value 1 by convention: the fill reads full and the sem-step checkmark joins the caption. The status attribute is runtime-independent (no script reads it) — the no-script CSS rule renders the check in either attribute spelling.