Spinner

An accessible loading indicator built on the Lucide Loader2 icon.

Install

npx shadcn@latest add https://atomx.acau.net/r/spinner.json

Usage

Spinner renders a spinning Lucide Loader2 SVG with role="status" and aria-label="Loading" so screen readers announce the loading state. Size and color it with Tailwind utilities.

<Spinner />
<Spinner className="size-6 text-primary" />

Preview

Sizes and colors

Loading…

Props

Spinner extends React.ComponentProps<"svg">. Pass className to size and color it. The default size is size-4 and the default animation is animate-spin.