Spinner 加载指示
旋转环加载图标，3 档尺寸 × 6 种 tone，可选文字标签同步作为 aria-label。
基础用法
无 prop 渲染默认尺寸 + 主色的旋转环。
<CfSpinner /><CfSpinner />三档尺寸
size —— sm 行内文字大小 / md 默认 / lg 模态级别加载提示。
<CfSpinner size="sm" />
<CfSpinner size="md" />
<CfSpinner size="lg" /><CfSpinner size="sm" />
<CfSpinner size="md" />
<CfSpinner size="lg" />6 种 tone
tone 控制描边颜色 — primary（默认）/ success / warning / danger / info / neutral。语义化对齐 token 里 --accent-* / --status-* / --fg-*。
<CfSpinner tone="primary" />
<CfSpinner tone="success" />
<CfSpinner tone="warning" />
<CfSpinner tone="danger" />
<CfSpinner tone="info" />
<CfSpinner tone="neutral" /><CfSpinner tone="primary" />
<CfSpinner tone="success" />
<CfSpinner tone="warning" />
<CfSpinner tone="danger" />
<CfSpinner tone="info" />
<CfSpinner tone="neutral" />文字标签
label 在右侧加可读文案，同时设为 aria-label，对屏读友好。
正在加载…保存中
<CfSpinner label="正在加载…" />
<CfSpinner size="lg" tone="success" label="保存中" /><CfSpinner label="正在加载…" />
<CfSpinner size="lg" tone="success" label="保存中" />API
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
tone | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'primary' | 颜色 |
label | string | — | 文字标签 + aria-label |
反馈与讨论
Spinner 加载指示 的讨论