# Spinner

Displays a circular loading indicator for transient states and background processing.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="spinner-demo">
  <div className="flex items-center justify-center py-12">
    <Spinner size="lg" />
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/spinner.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return <Spinner size="md" />
}
```

## Examples [#examples]

### Sizes [#sizes]

Use the `size` prop to control the physical dimensions of the spinner.

<ComponentPreview name="spinner-sizes">
  <div className="flex items-center gap-6 py-8">
    <Spinner size="sm" />

    <Spinner size="default" />

    <Spinner size="md" />

    <Spinner size="lg" />

    <Spinner size="xl" />
  </div>
</ComponentPreview>

### Intents [#intents]

Use the `intent` prop to change the color context. `intent="inherit"` is particularly useful when composing the spinner inside buttons.

<ComponentPreview name="spinner-intents">
  <div className="flex items-center gap-6 py-8">
    <Spinner intent="default" size="md" />

    <Spinner intent="primary" size="md" />

    <div className="flex items-center gap-4">
      <Button>
        <Spinner intent="inherit" />

        {"Loading"}
      </Button>

      <Button variant="secondary">
        <Spinner intent="inherit" />

        {"Processing"}
      </Button>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

| Prop     | Type                                        | Default     | Description                                                     |
| -------- | ------------------------------------------- | ----------- | --------------------------------------------------------------- |
| `size`   | `"default" \| "sm" \| "md" \| "lg" \| "xl"` | `"default"` | The size of the spinner.                                        |
| `intent` | `"default" \| "primary" \| "inherit"`       | `"default"` | The color context of the spinner. Use `inherit` inside buttons. |