Components

Progress Indicators

Four kinds of progress, each honest about what it measures: steps you can count, scales that floor upward, capacity that interprets, and sync that reports.

Onboarding step dots, live

7px dots; active stretches to a 20px orange pill (0.25s)

Fueling dots

Carbs

Protein

Electrolytes

1–3 scale — adjustments only floor upward, mirroring the engine's Math.max policy

Capacity bar

Recovery CapacityGood

Recovery CapacityLimited

Band	Range
High	≥ 90
Good	75–89
Moderate	50–74
Limited	25–49
Very Limited	< 25

Sync states

SyncedSyncing…Sync error

·Pair every indicator with a word (state band, sync label, dot count)
·Use determinate indicators wherever the total is known
·Keep the capacity bar's state word visible at all times

Don't

·Show percentage numbers without their state band
·Use progress UI decoratively — every indicator reports a real value
·Animate fueling dots — they are a reading, not an activity

Accessibility

—Dots groups expose “X of N” via aria-label.
—The capacity bar exposes value + state; the state word is visible text, not just color.
—Step dots reflect position (“step 2 of 3”) for screen readers.