Spinner
spinnerRenders a standalone CSS loading ring with status semantics.
Usage
Basic usage
Default md size, primary color rotation indicator, pure CSS animation, can be RSC.
tsx
<Spinner />Three sizes
size Control size: sm / md / lg.
tsx
<>
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</>Hue
tone switches the semantic color, current follows the parent text color, and can be placed in dark buttons.
tsx
<>
<Spinner tone="primary" />
<Spinner tone="muted" />
<span className="text-danger"><Spinner tone="current" /></span>
</>When to use
Use Spinner as a bare loading icon inside a button, inline status, or empty region. It is a CSS-animated SVG ring with role=status and no interaction. Use Spin for overlays or fullscreen loading, and Progress for known progress.
Import
ts
import { Spinner, spinnerVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm"|"md"|"lg" | "md" | Spinner size. |
| tone | "primary"|"current"|"muted" | "primary" | Color. current inherits currentColor for colored controls. |
| label | string | From ConfigProvider | Screen-reader status copy. Explicit values take precedence over the locale. |
| className | string | — | Container class name. |
Example
tsx
<Spinner />
<Button>
<Spinner size="sm" tone="current" />
Submitting
</Button>Usage guidelines
- Use
tone="current"to inherit a button or link's foreground. The default primary tone is fixed. - Spinner has no
spinningswitch: rendering it means spinning. Conditionally render it or use Spin'sspinningprop. - No other known caveats.
Related
Playground
<Spinner />