# Spinner

An indicator that can be used to show a loading state.

## When to use

* Show that something is loading, such as inside a button while a form submits.
* Mark a part of the page that is waiting for data.

## How it works

One part: `Spinner`. It renders the `Loader2Icon` from `lucide-react` with `animate-spin`, `role="status"` and `aria-label="Loading"`. It is the same in both versions; change its size with a `size-*` class.

## Example

### Base UI

```tsx
'use client'

import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,
} from "@/shadcn/base/ui/item"
import { Spinner } from "@/shadcn/base/ui/spinner"

export default function SpinnerDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
      <Item variant="muted">
        <ItemMedia>
          <Spinner />
        </ItemMedia>
        <ItemContent>
          <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
        </ItemContent>
        <ItemContent className="flex-none justify-end">
          <span className="text-sm tabular-nums">$100.00</span>
        </ItemContent>
      </Item>
    </div>
  )
}
```

```tsx [components/ui/spinner.tsx]
import { cn } from "cn"
import { Loader2Icon } from "lucide-react"

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

export { Spinner }
```

### Radix

```tsx
'use client'

import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,
} from "@/shadcn/radix/ui/item"
import { Spinner } from "@/shadcn/radix/ui/spinner"

export default function SpinnerDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
      <Item variant="muted">
        <ItemMedia>
          <Spinner />
        </ItemMedia>
        <ItemContent>
          <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
        </ItemContent>
        <ItemContent className="flex-none justify-end">
          <span className="text-sm tabular-nums">$100.00</span>
        </ItemContent>
      </Item>
    </div>
  )
}
```

```tsx [components/ui/spinner.tsx]
import { cn } from "cn"
import { Loader2Icon } from "lucide-react"

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

export { Spinner }
```

## Installation

```bash
npx shadcn@latest add spinner
```

## Reference

Official page: https://ui.shadcn.com/docs/components/spinner