Spinner

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

Import#

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

Usage#

<Spinner />

<Spinner />

Editable Example

Spinner with Color#

<Spinner color="red.500" />

<Spinner color="red.500" />

Editable Example

Spinner with different size#

<Stack direction="row" spacing={4}>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>

<Stack direction="row" spacing={4}>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>

Editable Example

Spinner with empty area color#

<Spinner
  thickness="4px"
  speed="0.65s"
  emptyColor="gray.200"
  color="blue.500"
  size="xl"
/>

<Spinner
  thickness="4px"
  speed="0.65s"
  emptyColor="gray.200"
  color="blue.500"
  size="xl"
/>

Editable Example

Props#

Name	Type	Description	Default
colorScheme	`string`		-
emptyColor	`string`	The color of the empty area in the spinner	-
label	`string`	For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.	-
size	`string`		-
speed	`string`	The speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```	-
thickness	`string`	The thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```	-
variant	`string`		-

Edit this page