Back to Chakra Ui

Spinner

apps/www/content/docs/components/spinner.mdx

0.3.0-beta1.2 KB
Original Source
<ExampleTabs name="spinner-basic" />

Usage

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

Examples

Sizes

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

<ExampleTabs name="spinner-with-sizes" />

Colors

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

<ExampleTabs name="spinner-with-colors" />

Custom Color

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

<ExampleTabs name="spinner-custom-color" />

Track Color

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

<ExampleTabs name="spinner-with-track-color" />

Custom Speed

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

<ExampleTabs name="spinner-with-custom-speed" />

Thickness

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

<ExampleTabs name="spinner-with-custom-thickness" />

Label

Compose the spinner with a label to provide additional context.

<ExampleTabs name="spinner-with-label" />

Overlay

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

<ExampleTabs name="spinner-with-overlay" />

Props

Root

<PropTable component="Spinner" part="Spinner" />