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 with Color#

<Spinner color='red.500' />

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>

Spinner with empty area color#

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

Props#

`colorScheme`

Description

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

Type

(string & {})

`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

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

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