Status and feedback

Progress

components/ui/progress

A bar that fills with transform only, for uploads and streaks.

Level 348 / 100 XP

Craft notes

The fill moves with transform only, so long bars stay smooth
Reports aria-valuenow, with an optional aria-valuetext such as 34 of 100 XP
Ticks rise in pitch as it fills, and a reward lands when the level rolls over

Play it

Finish lessons until the level rolls over.

Sounds: tick, reward

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Value
value={64}
A plain percentage.
Small
size="sm"
A thinner bar for lists and cards.
Value text
valueText="3 of 5 steps"
Reads out a sentence instead of a percentage.