# Spinner 加载指示器 · HeroUI

> 用于展示等待或处理中状态的加载指示组件。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/components/spinner
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 引入

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

### 用法


> 示例 `spinner-basic`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/spinner


### 颜色


> 示例 `spinner-colors`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/spinner


### 尺寸


> 示例 `spinner-sizes`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/spinner


## 样式

### 传入 Tailwind CSS 类

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

function CustomSpinner() {
  return (
    <Spinner className="text-blue-500" />
  );
}
```

### 自定义组件类

若要自定义 Spinner 的组件类名，可使用 `@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)）：

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

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

## API 参考

### Spinner Props

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

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt