---
title: Spinner
description: A loading indicator component to show pending states
links:
  source: spinner/spinner.tsx
  styles: spinner.css
  storybook: Components/Feedback/Spinner
  figma: true
---

## Usage

```tsx
import { Spinner } from '@heroui/react';
```

<ComponentPreview
  name="spinner-basic"
/>

## Examples

### Colors

<ComponentPreview
  name="spinner-colors"
/>

### Sizes

<ComponentPreview
  name="spinner-sizes"
/>

### Speed

Apply an animation utility to change how fast a single spinner rotates. Pair it with
`motion-reduce:animate-none` so it stays still for users who prefer reduced motion.

<ComponentPreview
  name="spinner-speed"
/>

## Customization

### Tailwind CSS

<ComponentPreview name="spinner-custom-styles" />

### Global CSS

To customize the Spinner component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .spinner {
    @apply animate-spin;
  }

  .spinner--accent {
    color: var(--accent);
  }
}
```

## Styling Reference

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Spinner component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/spinner.css)):

#### Base & Size Classes [!toc]
- `.spinner` - Base spinner styles with default size
- `.spinner--sm` - Small size variant
- `.spinner--md` - Medium size variant (default)
- `.spinner--lg` - Large size variant
- `.spinner--xl` - Extra large size variant

#### Color Classes [!toc]
- `.spinner--current` - Inherits current text color
- `.spinner--accent` - Accent color variant
- `.spinner--danger` - Danger color variant
- `.spinner--success` - Success color variant
- `.spinner--warning` - Warning color variant

## API Reference

### Spinner

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the spinner |
| `color` | `"current" \| "accent" \| "success" \| "warning" \| "danger"` | `"accent"` | Color variant of the spinner |
| `className` | `string` | - | Additional CSS classes |

## Related Components

<RelatedComponents component="spinner" />
