Spinner 加载指示器

引入

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

用法

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

export function SpinnerBasic() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
    </div>
  );
}

颜色

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

const COLOR_LABELS = {
  accent: "强调",
  current: "当前",

尺寸

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

const SIZE_LABELS = {
  lg: "大",
  md: "中",

样式

传入 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