Spinner
Used to provide a visual cue that an action is processing
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
| Prop | Default | Type |
|---|---|---|
colorPalette | gray | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | md | 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |