Skip to content

Progress and meter

Preview Available in release assets

Size and colour the native progress and meter elements so task progress and bounded measurements share one visual treatment while keeping their distinct meaning.

Progress and meter primary example

Show code
<label>Upload <progress class="thin-progress" max="100" value="40">40%</progress>
</label>

Each authored example uses the production assets and includes copyable markup.

Determinate and indeterminate progress

An indeterminate progress has no value attribute.

Show code
<div class="thin-stack" data-space="s">
  <label>Upload <progress class="thin-progress" max="100" value="40">40%</progress>
</label>
<label>Preparing export <progress class="thin-progress">Working</progress>
</label>
</div>

A bounded measurement

A meter reports where a value sits within its range.

Show code
<label>Storage used <meter class="thin-meter" min="0" max="100" low="60" high="85" optimum="20" value="72">72%</meter>
</label>

Anatomy

  • Native progress.thin-progress for task completion
  • Native meter.thin-meter for a measurement within a known range
  • A visible label
  • Fallback text content inside the element

Variants and sizes

  • Determinate progress — shown above
  • Indeterminate progress — shown above
  • Meter with low, high, and optimum — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Localized, right-to-left, and system colors

The bar fills from the inline start and keeps its label.

Show code
<div class="thin-stack" data-space="s">
  <label lang="de">Hochladen der Abrechnungsunterlagen <progress class="thin-progress" max="100" value="65">65%</progress>
</label>
<label dir="rtl" lang="ar">التحميل <progress class="thin-progress" max="100" value="30">30%</progress>
</label>
</div>
  • Long localized label — shown above
  • Right-to-left reading direction — shown above
  • Forced colors — shown above

Interaction and keyboard behavior

Both elements are read-only. Update value from the server or a script; the browser exposes the new value.

Accessibility

Label each element with a visible label. Use progress for a task that advances and meter for a measurement; do not swap them. Keep the value available as text when it matters.

Contract
NATIVE
Basis
Native <progress> and <meter>; no APG widget

API

Use progress.thin-progress or meter.thin-meter. Omit value on progress for an indeterminate task. Set --thin-progress-size to change the bar thickness.

Behavior tier: native

Custom properties

PropertyDefaultDescription
--thin-progress-size.75remBlock size of the bar.

Fallback

Browsers without CSS render the native bar; the element's text content is the fallback for any browser without the element.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/progress/style.ts