Progress
canonThe 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"witharia-labelnaming the process ("Zpracování přepisu", "Zpracování dokumentů") — required by the component (ariaLabel). aria-valuemin="0",aria-valuemax="100";aria-valuenowonly when the value is known. In the indeterminate state it is omitted, which is how assistive technology recognises an unknown value.aria-valuetextcombines 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
--fgand meta--fg-secondaryon 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: reduceturns 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