Components › States & feedback › Loading › Progress

Progress

canon

The one canonical progress bar: work that takes minutes — the step in words, an optional number, time left, optional steps; running, done or failed.

Product owner 25 Sep 2026 (FA202): approved as THE one progress bar, 6 px (--sp-2) like .tl-prog instead of the 4 px candidate; the product-extraction bar (.pr-ex) was migrated onto it in acrm !3883, the other scattered bars were inventoried on 26 Sep 2026 (wave B): static ratios moved to Meter (acrm !3898, !3900), .tf-progress/.tf-subs-bar were dead CSS and removed (acrm !3901), .tl-prog in Task list turned out to be dead API and was deleted (acrm !3947). Estimates are written in words ("asi 23 %").

Used in 5 files · 4 areas · 5× — components/mail, components/meetings, components/running, pages/ProduktDetailPage

Keyboard

  • Progress is not interactive: nothing to focus, nothing to press. Any action tied to the job (cancel, retry, open the result) is a separate button next to it.

ARIA

  • The track is role="progressbar" with aria-label naming the process ("Zpracování přepisu", "Zpracování dokumentů") — required by the component (ariaLabel).
  • aria-valuemin="0", aria-valuemax="100"; aria-valuenow only when the value is known. In the indeterminate state it is omitted, which is how assistive technology recognises an unknown value.
  • aria-valuetext combines the step and the shown number ("Oprava jmen, 61 %"), so a screen reader hears the step, not a bare percentage.
  • Step glyphs (check, Loader, dashed circle) are decorative; the step state is carried by the visible label and its order.
  • When the state changes over time (running → done / failed), the host wraps Progress in a polite live region (aria-live="polite") so the change is announced without stealing focus.

Focus

  • Progress takes no focus and never moves it. Focus stays where the user left it while the job runs.

Contrast

  • Label --fg and meta --fg-secondary on the surface; the failure reason uses --critical-ink.
  • The fill colours (--accent, --positive, --critical) sit on --border; the state is never carried by colour alone — the label and meta say it in words.

Motion

  • prefers-reduced-motion: reduce turns off the width transition, and the indeterminate segment becomes a full, 40 % opaque track instead of a moving one.

Known limits

  • The indeterminate state has no value to announce; only the label and meta convey progress.
  • Step changes are announced only if the host provides the live region.

Source: docs/loading/progress.a11y.md · GitLab