Search for a command to run...
An indeterminate loading indicator — a faint full-circle track + a sweeping arc indicator. Use for unknown-duration work. For percentage-known progress, use `Progress`.
The Spinner has no size prop — set size-N directly via className to match the surrounding text or icon size.
The track and indicator both use currentColor, so wrapping in any text-* token tints the whole spinner.
Forwards every native <svg> attribute. The spinner is built as inline SVG (not FontAwesome), so styling is via Tailwind utilities on className.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | "size-4 animate-spin" | Merged with the defaults. Use size-N to size, text-* to color, animate-spin is already set. |
role | string | "status" | Pre-set so screen readers announce loading state. |
aria-label | string | "Loading" | Pre-set. Override with a more specific message when context warrants (e.g. "Uploading files"). |
Use a spinner when the work is indeterminate — you don't know how long it'll
take. For known progress (uploads, multi-step jobs), reach for Progress.
Inherit color via text-fg-mid / text-fg-high rather than hard-coding text-sand-X. The
spinner reads correctly in light and dark mode for free.
Match the spinner's size-N to the surrounding text or icon — size-3.5 next to xs body
copy, size-4 next to default body, size-5 next to lg.
Override aria-label with a meaningful action when the context isn't obviously
"loading" (e.g. aria-label="Generating response").
Use a spinner for tasks that take less than 200ms. The flash of a brief spin feels janky. Render nothing, or use an optimistic state, until the threshold.
Stack spinners — one indeterminate indicator per surface. Multiple spinners on the same screen suggest the page is broken.
Use a spinner where a skeleton would be more honest. If you can mock the eventual layout,
Skeleton reduces perceived load time and prevents layout shift.
Hand-roll your own spinning icon (<SomeIcon className="animate-spin">). The custom track +
indicator design is part of the brand — use this primitive.