开发预览更新于 2026-05-10

Spinner 加载指示

旋转环加载图标，3 档尺寸 × 6 种 tone，可选文字标签同步作为 aria-label。

基础用法

无 prop 渲染默认尺寸 + 主色的旋转环。

背景视口

src/App.vue

<script setup lang="ts">
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <CfSpinner />
</template>

<script setup>
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <CfSpinner />
</template>

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSpinner />
    </>
  );
}

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSpinner />
    </>
  );
}

三档尺寸

size —— sm 行内文字大小 / md 默认 / lg 模态级别加载提示。

背景视口

src/App.vue

<script setup lang="ts">
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="gap: 1.5rem; align-items: center;">
    <CfSpinner size="sm" />
    <CfSpinner size="md" />
    <CfSpinner size="lg" />
  </div>
</template>

<script setup>
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="gap: 1.5rem; align-items: center;">
    <CfSpinner size="sm" />
    <CfSpinner size="md" />
    <CfSpinner size="lg" />
  </div>
</template>

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSpinner size="sm" />
      <CfSpinner size="md" />
      <CfSpinner size="lg" />
    </>
  );
}

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSpinner size="sm" />
      <CfSpinner size="md" />
      <CfSpinner size="lg" />
    </>
  );
}

6 种 tone

tone 控制描边颜色 — primary（默认）/ success / warning / danger / info / neutral。语义化对齐 token 里 --accent-* / --status-* / --fg-*。

背景视口

src/App.vue

<script setup lang="ts">
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="gap: 1.5rem; align-items: center;">
    <CfSpinner tone="primary" />
    <CfSpinner tone="success" />
    <CfSpinner tone="warning" />
    <CfSpinner tone="danger" />
    <CfSpinner tone="info" />
    <CfSpinner tone="neutral" />
  </div>
</template>

<script setup>
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="gap: 1.5rem; align-items: center;">
    <CfSpinner tone="primary" />
    <CfSpinner tone="success" />
    <CfSpinner tone="warning" />
    <CfSpinner tone="danger" />
    <CfSpinner tone="info" />
    <CfSpinner tone="neutral" />
  </div>
</template>

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSpinner tone="primary" />
      <CfSpinner tone="success" />
      <CfSpinner tone="warning" />
      <CfSpinner tone="danger" />
      <CfSpinner tone="info" />
      <CfSpinner tone="neutral" />
    </>
  );
}

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfSpinner tone="primary" />
      <CfSpinner tone="success" />
      <CfSpinner tone="warning" />
      <CfSpinner tone="danger" />
      <CfSpinner tone="info" />
      <CfSpinner tone="neutral" />
    </>
  );
}

文字标签

label 在右侧加可读文案，同时设为 aria-label，对屏读友好。

背景视口

正在加载…保存中

src/App.vue

<script setup lang="ts">
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfSpinner label="正在加载…" />
    <CfSpinner size="lg" tone="success" label="保存中" />
  </div>
</template>

<script setup>
import { CfSpinner } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <CfSpinner label="正在加载…" />
    <CfSpinner size="lg" tone="success" label="保存中" />
  </div>
</template>

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack">
          <CfSpinner label="正在加载…" />
          <CfSpinner size="lg" tone="success" label="保存中" />
        </div>
    </>
  );
}

import { CfSpinner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-stack">
          <CfSpinner label="正在加载…" />
          <CfSpinner size="lg" tone="success" label="保存中" />
        </div>
    </>
  );
}

API

Prop	类型	默认值	说明
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`tone`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'`	`'primary'`	颜色
`label`	`string`	—	文字标签 + aria-label