Chapter 35: Progress

Core Idea

An interactive-operation status bar (renders role="progressbar") that supports both a determinate value and an indeterminate state — the counterpart to Meter's static, always-determinate gauge.

Key Concepts

• Anatomy: Root → Label, Track → Indicator, Value. Same shape as Meter (ch029).
• Indeterminate state: pass value={null} (implied by data-indeterminate existing as a state) for an operation whose completion percentage isn't known yet — style off [data-indeterminate] for a looping/pulsing indicator animation, distinct from [data-progressing] (an operation is actively running) and [data-complete] (reached 100%/finished).
• Value formatting: format/locale control the formatted text shown in Value; aria-valuetext/getAriaValueText override the accessible announcement independently.
• Range: min/max, defaulting to 0–100.

Reference Tables

Part	Notable props	Notable data attributes
Root	value, min, max, format, locale, aria-valuetext, getAriaValueText	data-complete, data-indeterminate, data-progressing (present on every part)

Key Takeaways

1. Use Progress (not Meter) for anything representing an ongoing operation — file upload, page load, multi-step wizard — especially when it might be indeterminate before a percentage is known.
2. Style the three states (data-progressing/data-indeterminate/data-complete) distinctly — a common bug is only styling the "progressing" bar-fill and forgetting a visually distinct indeterminate animation.

Connects To

• ch029 (Meter): the static, always-determinate sibling — same anatomy, different semantics.