---
title: Spinner 加载指示器
description: 用于展示等待或处理中状态的加载指示组件。
links:
  source: spinner/spinner.tsx
  styles: spinner.css
  storybook: Components/Feedback/Spinner
  figma: true
---

## 用法

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

<ComponentPreview
  name="spinner-basic"
/>

## 示例

### 颜色

<ComponentPreview
  name="spinner-colors"
/>

### 尺寸

<ComponentPreview
  name="spinner-sizes"
/>

### 速度

为单个 Spinner 添加动画工具类即可调整其旋转速度。请同时加上 `motion-reduce:animate-none`，以便在用户开启“减少动态效果”时保持静止。

<ComponentPreview
  name="spinner-speed"
/>

## 自定义样式

### Tailwind CSS

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

### 全局 CSS

若要自定义组件类，可使用 `@layer components` 指令。[了解更多](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes)。

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

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

## 样式参考

HeroUI 遵循 [BEM](https://getbem.com/) 方法论，确保组件变体与状态可复用且易于自定义。

### CSS 类

Spinner 使用以下 CSS 类（[查看源码样式](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/spinner.css)）：

#### 基础类与尺寸类 [!toc]
- `.spinner` - 基础样式与默认尺寸
- `.spinner--sm` - 小尺寸变体
- `.spinner--md` - 中等尺寸变体（默认）
- `.spinner--lg` - 大尺寸变体
- `.spinner--xl` - 特大尺寸变体

#### 颜色类 [!toc]
- `.spinner--current` - 继承当前文本颜色
- `.spinner--accent` - 强调色变体
- `.spinner--danger` - 危险色变体
- `.spinner--success` - 成功色变体
- `.spinner--warning` - 警告色变体

## API 参考

### Spinner
| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Spinner 的尺寸 |
| `color` | `"current" \| "accent" \| "success" \| "warning" \| "danger"` | `"accent"` | Spinner 的颜色变体 |
| `className` | `string` | - | 额外的 CSS 类名 |

## 相关组件

<RelatedComponents component="spinner" />