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.
Properties
| 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) |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use for indicating users that their action is being processed.
- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.
Don’t
- Don’t use to show progress. Favor a progress bar instead.
Integration
For integration guidelines, please see Web Components documentation .