Spinner
An animated, accessible loading indicator.
Preview
Section titled “Preview”<nana-spinner></nana-spinner>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/spinner";Basic usage
Section titled “Basic usage”<nana-spinner></nana-spinner>Sizes & variants
Section titled “Sizes & variants”<nana-spinner size="xs"></nana-spinner>
<nana-spinner size="sm"></nana-spinner>
<nana-spinner size="md"></nana-spinner>
<nana-spinner size="lg"></nana-spinner>
<nana-spinner size="xl"></nana-spinner>
<nana-spinner size="md" variant="success"></nana-spinner>
<nana-spinner size="md" variant="warning"></nana-spinner>
<nana-spinner size="md" variant="danger"></nana-spinner>
<nana-spinner size="md" variant="secondary"></nana-spinner>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | — | string | 'Loading…' | Accessible label announced to assistive technology |
size | — | Size | 'md' | Diameter of the spinner |
speed | — | SpinnerSpeed | 'normal' | Animation speed |
variant | — | SpinnerVariant | 'primary' | Colour variant |
CSS parts
| Part | Description |
|---|---|
::part(spinner) | The animated SVG mark |
CSS custom properties
| Property | Description |
|---|---|
--nana-spinner-color | Override the spinner color |
--nana-spinner-duration | Override the rotation duration |
CSS Variables
Section titled “CSS Variables”| Variable | Default | Description |
|---|---|---|
--nana-spinner-color | — | Override the spinner color |
--nana-spinner-duration | — | Override the rotation duration |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
spinner | The animated SVG mark |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Spinner interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook