---
title: Spinner
description: An indeterminate loading indicator.
---
import Source from './_generated/spinner.mdx';

An indeterminate activity indicator. iOS renders the classic eight fading spokes; Android renders an MD3 arc that sweeps while it rotates. Color is inherited via `currentColor`.

<DemoFrame component="spinner" />

## Installation

```bash
npx touchcn add spinner
```

## Usage

<CodeGroup>

```html Angular
<tcn-spinner size="md" />
<tcn-spinner class="text-[var(--color-destructive)]" />
```

```tsx React
import { TcnSpinner } from '@/components/ui/spinner';

<TcnSpinner size="md" />
<TcnSpinner className="text-[var(--color-destructive)]" />
```

```vue Vue
<script setup lang="ts">
import { TcnSpinner } from '@/components/ui/spinner';
</script>

<template>
  <TcnSpinner size="md" />
  <TcnSpinner class="text-[var(--color-destructive)]" />
</template>
```

</CodeGroup>

The spinner defaults to `--color-primary`; override it with any text-color utility since both platforms draw with `currentColor`. Animation is disabled and slowed under `prefers-reduced-motion`.

## Props

| Prop    | Type                     | Default     | Description                       |
| ------- | ------------------------ | ----------- | --------------------------------- |
| `size`  | `'sm' \| 'md' \| 'lg'`   | `'md'`      | 18 / 28 / 40 px indicator.        |
| `label` | `string`                 | `'Loading'` | Accessible label (`role="status"`). |

<Source />