Feedback

Progress, Spinner & Skeleton

The three loading states: known duration, unknown duration, and known shape.

Progress Spinner Skeleton

import { Progress, Spinner, Skeleton } from '@anomalia/ui';

Notes

Prefer Skeleton when you know the shape of what is coming — it avoids the layout jump a spinner hides.
Progress transitions width on the emphasized curve, so a jump from 20% to 80% reads as a move.

Determinate progress eases on the emphasized curve, so a jump from 20% to 80% reads as a move rather than a teleport.

Rendering video · 28%

Prefer a skeleton whenever you know the shape of what is coming: it holds the layout, so nothing jumps when the data lands.

Prop	Type	Default	Description
`value`	`number \| null`	`null`	0–100; `null` is indeterminate.
`tone`	`Tone`	`'accent'`	Bar colour.
`size`	`'sm' \| 'md'`	`'md'`	3 / 6px.

Prop	Type	Default	Description
`shape`	`'text' \| 'block' \| 'circle'`	`'text'`	Placeholder form.
`lines`	`number`	`1`	Text lines; the last is shortened.
`width / height / radius`	`string`	—	CSS overrides.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.