Components
Spinner
The Spinner component is an animated spinning icon used when an action is being processed.
When loading content or data, use the Skeleton component.
Usage
Spinner with color
Spinner with different size
Pass the size prop to change the spinner size to xs, sm, md, lg or xl
Spinner with empty area color
Accessibility
Use an aria-label to concisely explain the purpose of the spinner to assitive technologies, e.g. "Loading",
"Submitting" or "Processing".
Best Practice
Spinners should:
- Notify users that a request has been received and the action will soon complete.
- Not be used to for an entire page load.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | xl,lg,md,sm,xs | md | The size of the spinner. |
| thickness | string | 2px | The thickness of the spinner. |
| speed | string | 0.45s | The speed of the spinner. |
| label | string | Loading... | An accessible label for the spinner (Useful for screen readers) |
| color | string | The color of the spinner. | |
| emptyColor | string | transparent | The color of the empty areas in the spinner. |