source

Spinner

Loading indicators with multiple animation styles, semantic colors, and configurable speed.

Speed

Visible

Variant

Intent

Size

Label

Loading syntax highlighting...

01 Examples

Row-level loading

Show progress on a single row while the rest of the list stays interactive — the canonical pattern for async row actions in tables and lists.

design-tokens.md Synced

components.tsx

accessibility-audit.md Queued

Loading syntax highlighting...

Lazy-load indicator

Place a spinner at the end of a paginated list to signal that more content is being fetched.

Item 1 — Loaded
Item 2 — Loaded
Item 3 — Loaded

Loading more…

Loading syntax highlighting...

Color inheritance

Use `intent='current'` so the spinner picks up the surrounding text color via `currentColor` — ideal inside coloured surfaces, badges, or alerts where a fixed intent would clash.

Deploying

Retrying

Rolling back

Loading syntax highlighting...

02 Customization

Content Loading Overlay

Frosted glass overlay with centered spinner for in-place content loading.

Loading content…

Loading syntax highlighting...

Status Pipeline

Spinners as part of a multi-step processing flow.

Files uploaded Done

Processing data… Active

Deploy to production Pending

Loading syntax highlighting...

Inline with Button

Button's built-in loading state includes an inline spinner.

Loading syntax highlighting...

Slot Overrides

Use slotClasses to restyle individual parts without unstyled mode.

Loading syntax highlighting...

Fully Custom (unstyled)

Drop all defaults and build a completely unique indicator.

Loading syntax highlighting...

03 Accessibility

Screen Reader

Uses role="status" with aria-label from the label prop (defaults to "Loading…"). The aria-live="polite" region announces loading state without interrupting the user.

Visibility

When visible={false}, the spinner is removed from the DOM entirely — no visual output and no accessibility tree entry.

Reduced Motion

All animations (spin, bounce, pulse, bars) respect prefers-reduced-motion: reduce via Tailwind's motion-reduce: variant. In reduced-motion mode the spinner still renders statically to indicate loading.

Print

Spinners are hidden from print output via a @media print rule.

04 API Reference

13 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt