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#

`colorScheme`

Description

Color Schemes for Spinner are not implemented in the default theme. You can extend the theme to implement them.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`emptyColor`

Description

The color of the empty area in the spinner

Type

string

`label`

Description

For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.

Type

string

`size`

Type

"sm" | "md" | "lg" | "xl" | "xs"

Default

"md"

`speed`

Description

The speed of the spinner. @example ```jsx <Spinner speed="0.2s"/> ```

Type

string

`thickness`

Description

The thickness of the spinner @example ```jsx <Spinner thickness="4px"/> ```

Type

string

`variant`

Description

Variants for Spinner are not implemented in the default theme. You can extend the theme to implement them.

Type

string

Edit this page