Components · Feedback

Progress indicators

Three shapes for “how far along.” A determinate progress bar pairs a track with an accent fill and a live percent — for a task with a known total (importing the NVDA roster). <ProgressSteps> is the numbered stepper for an ordered flow: completed · current · pending, with the colored trail stopping at “you are here.” And a compact circular ring puts a percent in a badge-sized footprint. All determinate; each labels itself for assistive tech and never leans on hue alone.

determinate bar · label + live percent
Importing NVDA roster 68%
146 of 214 volunteers matched · syncing addresses…
Geocoding districts 41%
Paused — the officials service is slow; retrying in 20s.

The bar is a --surface-3 track holding an accent fill set by width:%, with the number mirrored as aria-valuenow on role="progressbar". A stalled/degraded run swaps the fill to warn and says so in the sub-label — the state never rides color alone.

ProgressSteps · completed · current · pending (4-step onboarding)
  1. Sign up
  2. Verify email
  3. Add address
  4. Join a team

A real <ol>. Completed steps fill accent and swap the number for a check; the connector after a completed step turns accent so the trail stops at the current step. Current is a filled accent circle showing its number, ringed in accent-soft and carrying aria-current="step". Pending stay muted surface-3 with a hairline border.

circular ring · a compact percent badge
75%
Profile
3 of 4 sections
✓
Onboarding
all steps done
40%
Sat clinic
8 of 20 slots

Two concentric <circle>s on a 36×36 viewBox at r=15.9155 (circumference ≈ 100), so stroke-dasharray="N 100" reads straight as a percent. Rotated -90° to start at 12 o’clock; round cap. The whole badge is a role="progressbar" — full uses the good hue and a check, not just a filled ring.

progress bar
--surface-3 track + accent fill (width:%). Mirror the number in aria-valuenow on role="progressbar" (min 0 / max 100).
steps
ProgressStep[] — each { label, status }, status ∈ completed | current | pending. Order defines the run and the numbering. Real <ol>.
connector logic
The connector after a step is accent only when that step is completed — the colored trail stops at the current step (“the trail behind you is done”).
current
Filled accent circle showing its number, ringed in accent-soft; carries aria-current="step". Completed swaps the number for a check.
ring
Two <circle>s, r=15.9155 so circumference ≈ 100 → stroke-dasharray="N 100". Rotate -90°, round cap. Wrap in role="progressbar".
never hue alone
Percent text, the check glyph and the step number all carry the state — the accent only reinforces it (for color-blind users and AT).

Source · ProgressSteps.tsx (status union · connector-done-after-completed · aria-current="step"), the app’s determinate progress bar & circular ring · palette --accent / --good / --warn · design-system/feedback.