Spinner

Purpose

An indeterminate loading indicator for short, in-place waits — inside a button during submit, or over a small region while data loads. For content-shaped loading use skeleton; for determinate progress use progress.

Anatomy

A single spinning icon (data-slot="spinner"). Size/color via className (size-*, text-*); inherits currentColor.

Style

No variants — a token-colored spinning glyph. Match surrounding text size when inline.

Behavior & functionality

Purely visual, always animating. Show only while a wait is genuinely in progress; remove on completion.

Accessibility

• Decorative on its own — announce the loading state on the region/control (aria-busy="true", or aria-label="Loading" on a status element), not on the spinner glyph. In a button, keep an accessible label while disabled.

Do / Don't

• ✅ Use inside a submitting button (with the button disabled + a label).
• ❌ Don't use for long/known-duration work — prefer progress or skeleton.