# Spinner

An animated SVG loading indicator with size variants and inheritable color.

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





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="spinner">
      <SpinnerDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="spinner">
      <SpinnerDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="spinner">
      <SpinnerDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="spinner">
      <SpinnerDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Sizes [#sizes]

```tsx
<Spinner size="sm" />      {/* 16px */}
<Spinner size="default" /> {/* 20px */}
<Spinner size="lg" />      {/* 24px */}
<Spinner size="xl" />      {/* 32px */}
```

## Color [#color]

Spinner inherits `currentColor` — control it with any Tailwind text color class.

```tsx
<Spinner className="text-primary" />
<Spinner className="text-destructive" />
<Spinner className="text-muted-foreground" />
```

## In a button [#in-a-button]

Place `Spinner` before the label in a `disabled` button while an action is in progress.

```tsx
<Button disabled>
  <Spinner size="sm" />
  Saving…
</Button>
```

## Accessibility [#accessibility]

`Spinner` renders as `role="status"` with `aria-label`. Override the label to describe the specific operation.

```tsx
<Spinner label="Uploading file…" />
```

## Props [#props]

| Prop        | Type                                | Default      | Description                             |
| ----------- | ----------------------------------- | ------------ | --------------------------------------- |
| `size`      | `"sm" \| "default" \| "lg" \| "xl"` | `"default"`  | Controls SVG dimensions                 |
| `label`     | `string`                            | `"Loading…"` | Accessible label (`aria-label`)         |
| `className` | `string`                            | —            | Pass text color or additional overrides |

## Usage [#usage]

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

<Spinner />
<Spinner size="lg" className="text-primary" />
```

## Specs [#specs]

```md
# Mint — Spinner Specs

## Component
- name: spinner
- file: registry/mint/spinner.tsx
- installs to: components/ui/spinner.tsx
- dependencies: class-variance-authority
- registryDependencies: none

## What is it
An animated SVG loading indicator that conveys an in-progress state. Use it
inside buttons, overlays, or inline next to text when an async operation is
running. Prefer Spinner over a skeleton when the wait is short and layout is
already established; do not use it as a page-level progress indicator for
long operations where a progress bar would give better feedback.

## Visual identity
Colorless by design — inherits currentColor so it adapts to any palette.
Two-layer SVG: a full-circle track at opacity-25 and a ~75° arc at opacity-75
spin continuously. The result is clean and unobtrusive on any background.

## Design tokens
No design tokens consumed directly. Color is resolved at runtime via
currentColor — set it with any Tailwind text-* utility (e.g. text-primary,
text-muted-foreground, text-destructive).

## Variants
- sm      → size-4 (16px). Use inside compact controls or tight layouts.
- default → size-5 (20px). General-purpose inline loading indicator.
- lg      → size-6 (24px). Standalone indicators with more breathing room.
- xl      → size-8 (32px). Prominent standalone states, e.g. card loading.

## States
- spinning: always active — animate-spin runs unconditionally on mount

## Conventions
- Color: pass a Tailwind text-* class via className to tint the spinner
- In buttons: place Spinner before the label inside a disabled Button while an action is pending
- Accessible label: aria-label defaults to "Loading…" — override with the label prop to describe the specific operation (e.g. label="Uploading file…")
- Sub-components expose data-slot="spinner" for CSS targeting
- No sounds / haptic: this component does not accept a sounds or haptic prop
```

## Installation [#installation]

<CommandBox componentName="spinner" className="mt-2" />