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.
<CfSpinner /><CfSpinner />Three sizes
size — sm for inline text, md default, lg for modal-level loading hints.
<CfSpinner size="sm" />
<CfSpinner size="md" />
<CfSpinner size="lg" /><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.
<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" />Text label
label adds readable text to the right and is also set as aria-label for screen readers.
正在加载…保存中
<CfSpinner label="Loading…" />
<CfSpinner size="lg" tone="success" label="Saving" /><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 |
反馈与讨论
Spinner · Discussion