Spinner

Spinner

Markdown

A compact indeterminate status indicator that inherits the surrounding text color.

Use Spinner for a short wait with no measurable total. Use Progress for measurable work and Skeleton when loaded content has a predictable shape.

Loading recent activityLoading recent activity
Loading status

Installation

$npx shadcn@latest add @patchui/spinner

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/spinner.tsx.

Usage

<div className="flex items-center gap-2">
  <Spinner size="sm" label="Loading recent activity" />
  <span className="text-small text-ink-muted">Loading recent activity</span>
</div>

Spinner uses currentColor, so its context controls the visual tone. Prefer Button’s loading prop instead of manually inserting Spinner into a button.

API reference

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Sets a 16, 20, or 24 pixel indicator.
labelstring"Loading"Names the work in progress for assistive technology.

Use className only when the indicator must align to geometry outside the shared size scale.

Accessibility

  • Replace the generic label with specific context such as Saving project or Loading recent activity.
  • Keep visible status text when people need to understand what is waiting.
  • Spinner uses status semantics, so avoid mounting several indicators for one loading region.
  • Animation stops under reduced-motion preferences while the static indicator remains visible.