Spinner 加载指示器

用法

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

示例

颜色

尺寸

速度

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

自定义样式

Tailwind CSS

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

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

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

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Spinner 使用以下 CSS 类（查看源码样式）：

基础类与尺寸类

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

颜色类

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

API 参考

Spinner

相关组件