# Spinner

An accessible loading spinner built on Lucide's Loader2 icon.

## Installation

```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/spinner.json
```

[Registry JSON](https://reactdocs.canceydejean.dev/r/spinner.json)

## Preview

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

export function Preview() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
      <Spinner className="size-6" />
      <Spinner className="size-8 text-muted-foreground" />
    </div>
  );
}
```


## Source

### spinner.tsx

```tsx
import { Loader2Icon } from "lucide-react";

import { cn } from "cn";

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  );
}

export { Spinner };
```



## Usage

Use the spinner to indicate loading or pending state. Pass `className` to adjust size or color.

```tsx
import { Spinner } from "@/components/spinner/spinner";

export function Example() {
  return <Spinner className="size-6" />;
}
```