@chakra-ui/spinner

Spinners provide a visual cue that an action is processing, awaiting a course of change or a result.

Installation

yarn add @chakra-ui/spinner

# or

npm i @chakra-ui/spinner

Import component

import { Spinner } from "@chakra-ui/spinner"

Usage

<Spinner />

Spinner with different sizes

Change the size of the spinner by passing the size prop.

<>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</>

Spinner with color

Change the background color of the moving section of the spinner by passing the color prop.

<Spinner color="red.500" />

Spinner with empty area color

Change the background color of the spinner by passing the emptyColor prop.

<Spinner color="red.500" emptyColor="gray.200" />

Spinner with different speed

Change the spinner's animation speed area by passing the speed prop. The unit of the value matches the animation-duration CSS property property.

<Spinner color="red.500" emptyColor="gray.200" speed="0.65s" />