Spinner 加载指示器

引入

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

用法

颜色

尺寸

样式

传入 Tailwind CSS 类

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

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

自定义组件类

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

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