Spinner
An animated loading indicator with a conic-gradient arc. Inherits the current text color and comes in four sizes.
Playground
<Spinner />Preview
Drop it anywhere loading state needs to be shown – inside buttons, empty states or full-page loaders. The default size is size-3.5 (14px).
<Spinner />Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/spinner.jsonUsage
import { Spinner } from "@/components/ui/spinner"<Button disabled>
<Spinner />
Saving...
</Button>Sizes
size steps through sm (12px), default (14px), lg (16px) and xl (20px).
<Spinner size="sm" />
<Spinner size="default" />
<Spinner size="lg" />
<Spinner size="xl" />Track
track renders a static ring behind the arc at 25% opacity – useful on busy surfaces where the spinning arc alone is hard to follow.
<Spinner size="sm" track />
<Spinner size="default" track />
<Spinner size="lg" track />
<Spinner size="xl" track />Colors
Both the arc and the track are drawn with currentColor, so any text color utility recolors the spinner – including the track, which stays at 25% opacity of the same hue.
<Spinner size="xl" className="text-blue-500" />
<Spinner size="xl" className="text-green-500" />
<Spinner size="xl" track className="text-amber-500" />
<Spinner size="xl" track className="text-red-500" />
<div className="flex size-12 items-center justify-center rounded-lg bg-primary">
<Spinner size="xl" className="text-primary-foreground" />
</div>API reference
Spinner renders a single svg element and accepts every standard SVG prop alongside the ones below.
Spinner
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | "default" | Rendered size: sm is size-3 (12px), default size-3.5 (14px), lg size-4 (16px), xl size-5 (20px). |
| track | boolean | false | Draws a static background ring behind the arc at 25% stroke opacity in the current color. |
| className | string | – | Merged onto the svg – use text color utilities to tint, or a size utility to override the size variant. |
Accessibility & styling hooks
The svg renders role="status" with aria-label="Loading", so assistive tech announces it as a live status; pass your own aria-label for more specific copy. It also exposes data-slot="spinner" for CSS targeting, and the spinnerVariants cva helper is exported for reusing the size classes on custom indicators.