Component 12 · Complete

Spinner

Communicates indeterminate progress when the duration or amount of work cannot be measured.

Default

Show work with an unknown duration

The visual Spinner is decorative. A nearby live Status communicates what is happening.

Sizes

Match the space and emphasis

Small fits compact controls, Medium is the default, Large supports local regions, and Extra Large suits an empty content area.

Tones

Inherit the surrounding emphasis

Default uses primary text, Muted reduces emphasis, Accent follows the theme, and Inverse supports a dark or accent surface.

Labels

Say what the interface is doing

Use a concise present-participle phrase. Stacked layout works when the status owns a larger centered region.

Loading region

Keep the busy state on the affected area

The region exposes aria-busy="true". The Status names the current work without blocking unrelated content.

Controls

Prevent repeated actions while pending

Use the Button loading contract for pending actions. The Button owns its accessible busy state and remains disabled until completion.

Pending action
Compact custom control

Usage guidance

Use determinate progress when measurement exists.

Spinner is appropriate only when progress cannot be quantified. For content placeholders that preserve layout, use Skeleton.

Next component: Skeleton