Skip to content
Lenso UI

Spinner 加载指示器

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

用法

import { Spinner } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";
import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 16 } });
export function SpinnerBasic() {  return (    <div {...stylex.props(styles.row)}>      <Spinner />    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

示例

颜色

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: { display: "flex", alignItems: "center", gap: 32 },  column: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 },  caption: { fontSize: 12, lineHeight: "16px", color: "var(--muted)", textTransform: "capitalize" },});export function SpinnerColors() {  return (    <div {...stylex.props(styles.row)}>      {(["current", "accent", "success", "warning", "danger"] as const).map((color) => (        <div key={color} {...stylex.props(styles.column)}>          <Spinner color={color} />          <span {...stylex.props(styles.caption)}>{color}</span>        </div>      ))}    </div>  );}export default SpinnerColors;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

尺寸

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: { display: "flex", alignItems: "center", gap: 32 },  column: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 },  caption: { fontSize: 12, lineHeight: "16px", color: "var(--muted)" },});export function SpinnerSizes() {  return (    <div {...stylex.props(styles.row)}>      {(        [          ["sm", "Small"],          ["md", "Medium"],          ["lg", "Large"],          ["xl", "Extra Large"],        ] as const      ).map(([size, label]) => (        <div key={size} {...stylex.props(styles.column)}>          <Spinner size={size} />          <span {...stylex.props(styles.caption)}>{label}</span>        </div>      ))}    </div>  );}export default SpinnerSizes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

速度

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

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: { display: "flex", alignItems: "center", gap: 32 },  column: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 },  caption: { fontSize: 12, lineHeight: "16px", color: "var(--muted)" },  slow: { animationDuration: "1.5s" },  fast: { animationDuration: ".4s" },});export function SpinnerSpeed() {  return (    <div {...stylex.props(styles.row)}>      <div {...stylex.props(styles.column)}>        <Spinner xstyle={styles.slow} />        <span {...stylex.props(styles.caption)}>Slow</span>      </div>      <div {...stylex.props(styles.column)}>        <Spinner />        <span {...stylex.props(styles.caption)}>Default</span>      </div>      <div {...stylex.props(styles.column)}>        <Spinner xstyle={styles.fast} />        <span {...stylex.props(styles.caption)}>Fast</span>      </div>    </div>  );}export default SpinnerSpeed;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Spinner } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  row: {    display: "flex",    alignItems: "center",    gap: 16,    borderRadius: "var(--radius-xl)",    border: "1px solid var(--border)",    backgroundColor: "var(--surface)",    paddingInline: 20,    paddingBlock: 16,  },  accent: { color: "var(--accent)" },  muted: { color: "var(--muted)" },  success: { color: "var(--success)" },});export function CustomStyles() {  return (    <div {...stylex.props(styles.row)}>      <Spinner xstyle={styles.accent} size="sm" />      <Spinner xstyle={styles.muted} size="md" />      <Spinner xstyle={styles.success} size="lg" />    </div>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

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

@layer components {  .spinner {    @apply animate-spin;  }
  .spinner--accent {    color: var(--accent);  }}

样式参考

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

CSS 类

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 的颜色变体
classNamestring-额外的 CSS 类名

相关组件