ComponentsNo. 52 of 109

Spinner

Animated status indicator for work in progress, announced as Loading.

Installation

pnpm dlx shadcn@latest add @corsair-ui/spinner

No setup needed: the CLI finds @corsair-ui in the shadcn registry directory. The files land in your project as source: edit them like your own code. More in Installation.

Also adds: utils
npm: clsxlucide-reacttailwind-merge

Examples

Sizes

Inline

Give it a specific label when you can.

Loading bookings

Accessibility

Announced as "Loading" by default; pass a more specific aria-label when you can.
Slows down instead of stopping with prefers-reduced-motion, so progress stays visible.

Compatibility

Tailwind CSS: 3.4 and 4, both checked in CI
React: 19
Rendering: Works in server components

Source

1 file, installed as source you own

spinner.tsxView on GitHub

import { LoaderCircleIcon } from "lucide-react";
import type { ComponentProps } from "react";

import { cn } from "@/registry/default/lib/utils";

/**
 * A status indicator for work in progress. It is announced as "Loading" by
 * default; pass a more specific `aria-label` when you can ("Saving draft").
 * Inside a Button, use the Button's `loading` prop instead.
 */
function Spinner({ className, ...props }: ComponentProps<"svg">) {
  return (
    <LoaderCircleIcon
      role="status"
      aria-label="Loading"
      data-slot="spinner"
      className={cn(
        "size-4 animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite]",
        className
      )}
      {...props}
    />
  );
}

export { Spinner };