Ship faster with beautiful components
HeroUI Pro

Spinner

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

Storybook@heroui/spinnerServer componentSourceStyles source

Installation

The above command is for individual installation only. You may skip this step if @heroui/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

Variants

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. (Effective only when variant is default or gradient)
  • circle2: The second circle of the spinner. (Effective only when variant is default or gradient)
  • dots: Dots of the component. (Effective only when variant is dots or dots-blink)
  • bars: Bars of the component. (Effective only when variant is bars)
  • label: The label content.

API

Spinner Props

PropTypeDefault
label
string
size
sm | md | lg
"md"
color
default | primary | secondary | success | warning | danger
"primary"
variant
default | gradient | dots | dots-blink | star
"default"
labelColor
default | primary | secondary | success | warning | danger
"default"
classNames
Partial<Record<'base' | 'wrapper' | 'circle1' | 'circle2' | 'dots' | 'bars' | 'label', string>>
SpacerSwitch