Usage
Spinner indicates to users that their action is being processed. Customise the size and color to fit the context, and provide a label when the spinner needs an accessible name.
import "@nordhealth/components/lib/Spinner"
Examples
Sizes
The size attribute scales the spinner from xs to xxl.
Color
The color attribute accepts any valid CSS colour value, including custom properties.
With label
Provide a label to give the spinner an accessible name describing what's loading.
Size
Set the size attribute to scale a single spinner to a specific size.
Position
Spinners can be positioned and aligned alongside other content, such as inside buttons or text.
RTL
Spinner follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Provide a
labeldescribing what's loading. If no label is supplied, the spinner is hidden from assistive technology, so set one whenever its presence conveys meaningful state. - When a spinner replaces a region of content while it loads, consider marking that region with
aria-busy="true"so the loading state is exposed. - Don't rely on a spinner indefinitely; if a process fails or stalls, surface a clear message rather than leaving the spinner running.
API reference
Spinner
Spinner component is used to indicate users that their action is being processed. You can customize the size and color of the spinner with the provided properties.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
size | size | The size of the spinner. | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'm' |
color | color | The color of the spinner.
Can accept any valid CSS color value, including custom properties.
Takes precedence over the --n-spinner-color CSS custom property. | string | undefined | — |
label | label | An accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology. | string | undefined | — |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-spinner-color | Controls the color the spinner. | var(--n-color-accent) |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.