Chapter 26: Progress

Core Idea

An accessible progress bar — a thin primitive that mostly exists to wire the progressbar ARIA role and value announcements correctly; visual rendering is entirely your CSS.

Key Concepts

Anatomy: Root → Indicator (the part that both renders visually and carries the accessible progress semantics).
value/max: value: null represents an indeterminate/loading state distinct from a numeric 0.
getValueLabel: customize the accessible label announced for a given value/max pair (e.g. "3 of 10 files uploaded" instead of a bare percentage).
[data-state]: "complete" | "indeterminate" | "loading" — drive all visual states from this instead of computing it yourself from value.

Code Examples

<Progress.Root value={progress} max={100}>
  <Progress.Indicator
    style={{ transform: `translateX(-${100 - progress}%)` }}
  />
</Progress.Root>

What it demonstrates: the common CSS-transform pattern for animating a fill bar driven purely by the value prop.

Key Takeaways

Use value={null} for indeterminate/unknown-duration operations rather than faking a numeric value — it maps to the correct data-state/ARIA semantics.
Always provide max when it's not 100 (e.g. a byte-count-based upload) so assistive tech announces the correct proportion.
This primitive renders nothing visually by default — Indicator needs your CSS (typically a transform/width transition) to actually show progress.

Connects To

Meter-style status: conceptually related to Slider (also a numeric-value control), though Progress is read-only/non-interactive.