Spinner

A high-quality, styled React spinner component for indicating asynchronous loading states.

The Spinner component renders an accessible SVG loading spinner for indicating asynchronous actions or loading states.

Usage

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

export function ExampleSpinner() {
  return <Spinner size="md" />;
}

Customize spinner stroke color, animation duration, or sizing via className:

<Spinner className="text-indigo-500 animate-spin duration-700 h-8 w-8" />

Target internal spinner CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.spinner`	Root SVG element	SVG spinner element with continuous rotation animation.
`spinner--sm`	Small size	16px (h-4 w-4) spinner.
`spinner--md`	Medium size	20px (h-5 w-5) spinner.
`spinner--lg`	Large size	24px (h-6 w-6) spinner.
`spinner--xl`	Extra large size	32px (h-8 w-8) spinner.

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Dimension size of the spinner.
`variant`	`'default' \| 'muted' \| 'primary'`	`'default'`	Visual color variant of the spinner.