Spinner

Show activity beside concise, caller-owned pending feedback.

Preview

Checking sources

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/spinner.json

Basic usage

123import { Spinner } from "@/components/ui/spinner";

<div role="status"><Spinner /> Checking sources</div>

Structures

Spinner is an SVG glyph. It is decorative when a nearby status already names the pending task. Give it an explicit label only when the glyph itself is the only status content.

Examples

Small

Fit activity into an inline control.

Default

Use the default activity glyph beside task feedback.

Large

Increase emphasis for a contained pending task.

Numeric

Set a specific positive pixel size.

Button

Keep a pending action disabled until the demo operation finishes.

Panel

Pair indeterminate activity with one clear task status.

Checking sources

Dark

Inherit the host color on a contrasting surface.

Checking sources

Reduced Motion

Keep a visible static glyph beside pending feedback.

Checking sources

Explicit Label

Give a standalone spinner one accessible status name.

Complete

Show the completed task without an activity glyph.

Sources checked

API reference

Spinner properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| number`	`"default"`	Uses 16, 20, or 24 pixels for named sizes. Positive finite numeric sizes pass through; other numeric values use 20.
`label`	`string`		When present, sets role=status and aria-label. Omit beside an existing status message.
`ref / native SVG props / className / style`	`React SVG props`		Forwarded to the svg. Decorative mode sets aria-hidden.