Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Spinner

Used to provide a visual cue that an action is processing

SourceStorybookRecipe

Usage

import { Spinner } from "@chakra-ui/react"
<Spinner />

Examples

Sizes

Use the size prop to change the size of the spinner.

Colors

Use the colorPalette prop to change the color scheme of the spinner.

Custom Color

Use the color prop to pass a custom color to the spinner.

Track Color

Use the --spinner-track-color variable to change the color of the spinner's track.

Custom Speed

Use the animationDuration prop to change the speed of the spinner.

Thickness

Use the borderWidth prop to change the thickness of the spinner.

Label

Compose the spinner with a label to provide additional context.

Loading...

Overlay

Compose spinner with the AbsoluteCenter component to overlay the spinner on top of another component.

Some heading text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac consectetur libero, id ultricies urna. Sed ac consectetur libero, id fames ac ante ipsum primis in faucibus.

Props

Root

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'xs' | 'sm' | 'md' | 'lg' | 'xl'

The size of the component

Previous

Slider

Next

Stat