Components

Progress

Usage Meter (role=meter) in four tones and three heights (xs on the neutral track), Reka Progress with the same visuals and an indeterminate sweep, and the 14px ProgressRing.

Meter

md 8px / sm 4px / xs 4px; tinted track (accent 12 %) with an inset alpha-1 hairline, fill #257de0; xs (Code usage popover) sits on the neutral track (white 10 % + 5 % ring); neutral track and no fill at 0; tiny values keep a dot.

Tones

accent19% used

success41% used

warning63% used

danger85% used

Edge values

xs (usage popover)

Neutral track, RTL

Animated value and ringFill eases over 200ms; ring dashoffset over 300ms.

Weekly limit42% used

Progress (task)

Reka progressbar for uploads and jobs; same track and fill. Without a value it sweeps: a 60 % bar at opacity .5 with a feathered mask, 1.6s (reduced motion: parked at 20 %).

Progress

Indeterminate (sweep)

Usage row recipe

Settings › Usage

Current sessionResets in 3 hr 12 min

19% used

All modelsResets Mon 9:00 AM

67% used