Spinner

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

Storybook@nextui-org/spinnerServer componentSourceStyles source
Zigma by NextUI (YC S24) - Connect your design files to production code in minutes | Product Hunt

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 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

Circular Progress Props

AttributeTypeDescriptionDefault
labelstringThe content to display as the label.-
sizesm | md | lgThe size of the spinner circles.md
colordefault | primary | secondary | success | warning | dangerThe color of the spinner circles.primary
labelColordefault | primary | secondary | success | warning | dangerThe color of the label.default
classNamesRecord<"base"|"wrapper"|"circle1"|"circle2"|"label", string>Allows to set custom class names for the spinner slots.-