Spinner
Spinner express an unspecified wait time or display the length of a process.
Storybook@nextui-org/spinnerServer componentSourceStyles source
We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀
Installation
npx nextui-cli@latest add spinner
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.
Import
Usage
Note: Spinner adds
Loadingasaria-labelby default. This is required for accessibility. You can change it by passing alabeloraria-labelprop.
Sizes
Colors
With Label
Label colors
Slots
- base: The base slot of the spinner, it wraps the circles and the label.
- wrapper: The wrapper of the circles.
- circle1: The first circle of the spinner.
- circle2: The second circle of the spinner.
- label: The label content.
API
Circular Progress Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| label | string | The content to display as the label. | - |
| size | sm | md | lg | The size of the spinner circles. | md |
| color | default | primary | secondary | success | warning | danger | The color of the spinner circles. | primary |
| labelColor | default | primary | secondary | success | warning | danger | The color of the label. | default |
| classNames | Record<"base"｜"wrapper"｜"circle1"｜"circle2"｜"label", string> | Allows to set custom class names for the spinner slots. | - |
