Spinner
An animated loading indicator for asynchronous work and pending content.
Controllable size, colour, and speed, with an accessible label announced to
assistive technology out of the box.
Variants
| 1 | <nana-spinner variant="primary"></nana-spinner> |
| 2 | <nana-spinner variant="secondary"></nana-spinner> |
| 3 | <nana-spinner variant="success"></nana-spinner> |
| 4 | <nana-spinner variant="warning"></nana-spinner> |
| 5 | <nana-spinner variant="danger"></nana-spinner> |
On Dark Surfaces
| 1 | <!-- For dark / coloured surfaces --> |
| 2 | <nana-spinner variant="white"></nana-spinner> |
Sizes
| 1 | <nana-spinner size="xs"></nana-spinner> <!-- 12px --> |
| 2 | <nana-spinner size="sm"></nana-spinner> <!-- 16px --> |
| 3 | <nana-spinner size="md"></nana-spinner> <!-- 24px --> |
| 4 | <nana-spinner size="lg"></nana-spinner> <!-- 32px --> |
| 5 | <nana-spinner size="xl"></nana-spinner> <!-- 48px --> |
Speed
| 1 | <nana-spinner speed="slow"></nana-spinner> |
| 2 | <nana-spinner speed="normal"></nana-spinner> |
| 3 | <nana-spinner speed="fast"></nana-spinner> |
Inline With Text
Loading your dashboard…
Syncing changes
| 1 | <span style="display:inline-flex;align-items:center;gap:0.5rem"> |
| 2 | <nana-spinner size="sm"></nana-spinner> |
| 3 | Loading your dashboard… |
| 4 | </span> |
In a Button
Saving Processing
| 1 | <nana-button variant="primary" loading>Saving</nana-button> |
Props
| Attribute | Type | Default | Description |
size | xs | sm | md | lg | xl | md | Diameter — 12 / 16 / 24 / 32 / 48 px |
variant | primary | secondary | success | warning | danger | white | primary | Colour variant (use white on dark surfaces) |
speed | slow | normal | fast | normal | Rotation speed |
label | string | "Loading…" | Accessible label announced to screen readers |
CSS Custom Properties
| Property | Description |
--nana-spinner-color | Override the spinner colour with any custom value |
--nana-spinner-duration | Override the rotation duration (takes precedence over speed) |
| 1 | <nana-spinner |
| 2 | style="--nana-spinner-color: #8b5cf6; --nana-spinner-duration: 1.5s" |
| 3 | ></nana-spinner> |
CSS Parts
| Part | Description |
spinner | The animated SVG mark |
Accessibility
- The host is given
role="status" and aria-live="polite" so the loading state is announced. - The
label renders as visually-hidden text for screen readers; the animated mark itself is aria-hidden. - Provide a descriptive
label (e.g. "Loading user data") instead of the generic default wherever you can. - Honours
prefers-reduced-motion by slowing the rotation right down.