Spinner
stable 0.6 kB<hk-spinner>Seven shapes, all sized in em, so the same component works in a button, a card or a full-page overlay without a size prop. Four are workhorses; orbit, comet and morph are for the splash and empty states where a plain ring reads as nothing happening.
#loading
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'ring' | 'dots' | 'bars' | 'pulse' | 'orbit' | 'comet' | 'morph' | 'ring' | The first four are the workhorses. `orbit`, `comet` and `morph` are for splash and empty states, where a plain ring reads as nothing happening. |
| inherit | boolean | false | Takes colour from currentColor, for use inside a filled control. |
| label | string | 'Loading' | Text announced to assistive tech. |
| delay | number | 0 | Milliseconds to wait before showing — avoids a flash on fast responses. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-spinner-accent | #dc2626 | Spinner colour. |
| --hk-spinner-track | rgb(15 23 42 / 0.12) | Unfilled ring. |
| --hk-spinner-speed | 0.7s | Rotation duration. |
Accessibility
- Wrapped in role="status" aria-live="polite" with a visually hidden label, so it announces once without nagging.
- Sized in em rather than px, so it scales with whatever text it sits beside.
- Under prefers-reduced-motion it holds a legible static state instead of merely slowing down.