Spinner

@summonware/ui · spinner · P0 · Core UI

Usage

An indeterminate loading indicator for work of unknown duration. Carries `role="status"` and an accessible label, so a screen reader announces that something is happening rather than falling silent.
import { Spinner } from '@summonware/ui';

Best practices

DoPrefer a Skeleton when you know the shape of what is loading — it prevents the layout shift a spinner does not.
DoOverride `label` with something specific: "Loading orders" beats "Loading".
Don'tShow a spinner for work that finishes in under about 300ms. The flash is more distracting than the wait.

Examples

Common configurations, variations and states.

Sizes

Small sits inside buttons and table cells, medium is the default, large suits a full-panel loading state.

In context

Loading orders…
Paired with text and inside a button — the two placements that account for most real usage.

Reference variants

3 of 7 labels from the reference are demonstrated above.
SizeButtonsPlacementBorder spinnerBorder spinner [ Colors ]Growing spinnerGrowing spinner [ Colors ]