Spinner

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`	Color Schemes for `Spinner` are not implemented in the default theme. You can extend the theme to implement them.	-
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	`"sm" \| "md" \| "lg" \| "xl" \| "xs"`		`"md"`
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`	Variants for `Spinner` are not implemented in the default theme. You can extend the theme to implement them.	-

Edit this page