Spinner

Spinner is a compact animated indicator for short waits where a full skeleton layout would be heavier than the task. It is decorative by design: it does not hide itself from assistive technology, and it does not announce what is loading on its own.

When the spinner is the primary status signal, pair it with visible text that names the work, or wrap it in an element with role="status". Decorative instances inside chips or beside labels should stay aria-hidden when surrounding copy already conveys the state. Prefer the control's own loading prop on Button or IconButton rather than nesting a manual Spinner.

For progress along a track, use LinearProgress; for layout placeholders, use Skeleton.

When to useCopy Anchor Link

• Short opaque waits where layout does not need reserved structure
• Busy chrome inside a chip (small Spinner as addon) when the label already names the state
• A panel status row with muted helper copy under the indicator

When not to useCopy Anchor Link

• You need the page structure to stay put while content loads → Skeleton
• Upload, export, or sync progress with a track metaphor → LinearProgress
• Nesting a second Spinner inside Button / IconButton when loading already injects one

RelatedCopy Anchor Link

• Skeleton — layout-preserving placeholders
• LinearProgress — track progress with percent or indeterminate state
• Button — loading owns in-flight chrome on labeled actions

Common examplesCopy Anchor Link

Centered statusCopy Anchor Link

A centered status region with muted supporting text is the usual pattern when a panel is fetching. Keep the Spinner decorative (aria-hidden) and let the visible copy name the wait.

Chip addonCopy Anchor Link

Put a small Spinner on a non-interactive Chip when a status label is already in progress. The Chip label stays the accessible name; the Spinner is only visual chrome at addonPosition="end".

Button loadingCopy Anchor Link

For in-flight actions, set loading on the Button. The control owns the Spinner overlay, width lock, and busy semantics — do not nest a separate Spinner inside the label.

Ask your agentCopy Anchor Link

Center a loading indicator in this panel with muted supporting text below: "Fetching latest data." Announce the wait to screen readers.