# Spinner
**Category**: react
**URL**: https://www.heroui.com/docs/react/components/spinner
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(feedback)/spinner.mdx
> A loading indicator component to show pending states
***
## Import
```tsx
import { Spinner } from '@heroui/react';
```
### Usage
```tsx
import {Spinner} from "@heroui/react";
export function SpinnerBasic() {
return (
);
}
```
### Colors
```tsx
import {Spinner} from "@heroui/react";
export function SpinnerColors() {
return (
Current
Accent
Success
Warning
Danger
);
}
```
### Sizes
```tsx
import {Spinner} from "@heroui/react";
export function SpinnerSizes() {
return (
Small
Medium
Large
Extra Large
);
}
```
## Styling
### Passing Tailwind CSS classes
```tsx
import {Spinner} from '@heroui/react';
function CustomSpinner() {
return (
);
}
```
### Customizing the component classes
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);
}
}
```
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
- `.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
- `.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 Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the spinner |
| `color` | `"current" \| "accent" \| "success" \| "warning" \| "danger"` | `"current"` | Color variant of the spinner |
| `className` | `string` | - | Additional CSS classes |