Preview Updated 2026-05-10

Spinner

Spinning ring loader — 3 sizes × 6 tones, with an optional text label that doubles as aria-label.

Basic usage

With no props, renders the default size and primary color.

背景

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 />
    </>
  );
}

Three sizes

size — sm for inline text, md default, lg for modal-level loading hints.

背景

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" />
    </>
  );
}

Six tones

tone controls the stroke color — primary (default) / success / warning / danger / info / neutral. Semantically aligned with --accent-* / --status-* / --fg-* tokens.

背景

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" />
    </>
  );
}

Text label

label adds readable text to the right and is also set as aria-label for screen readers.

背景

正在加载…保存中

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 (
    <>
      <CfSpinner label="Loading…" />
      <CfSpinner size="lg" tone="success" label="Saving" />
    </>
  );
}

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`tone`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'`	`'primary'`	Color
`label`	`string`	—	Text label + aria-label