# Spinner

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

Docs: https://corsairui.vercel.app/docs/spinner

## Install

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

Also adds: `utils`.
npm: `clsx`, `lucide-react`, `tailwind-merge`.

## Styling

Restyle it in the project that installs it: `className` on each part, the theme variables, and these attributes with arbitrary variants (`[&_[data-slot=…]]:…`, `data-[state=…]:…`).

data-slot: `spinner`

## 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.

## Examples

On the docs page: Sizes, Inline. The usage examples in the source comments below are the reference.

## Source

What `shadcn add` writes into the project:

### spinner.tsx

```tsx
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 };
```