Spinner

Spinner express an unspecified wait time or display the length of a process.

Storybook @nextui-org/spinner Server component Source Styles source

Installation

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 Loading as aria-label by default. This is required for accessibility. You can change it by passing a label or aria-label prop.

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

Spinner Props

Prop	Type	Default
`label`	`string`
`size`	`sm \| md \| lg`	`"md"`
`color`	`default \| primary \| secondary \| success \| warning \| danger`	`"primary"`
`labelColor`	`default \| primary \| secondary \| success \| warning \| danger`	`"default"`
`classNames`	`Partial<Record<"base"｜"wrapper"｜"circle1"｜"circle2"｜"label", string>>`

Spacer Switch

On this page

Installation
Import
Usage
Sizes
Colors
With Label
Label colors
Slots
API
Spinner Props
Back to top