Spinner

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

Import

import { Spinner } from '@chakra-ui/react';

Usage

<Spinner />

<Spinner />

Spinner with Color

<Spinner color='red.500' />

<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>

<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' />

<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

Default

"transparent"

label

Description

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

Type

string

Default

"Loading..."

size

Type

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

Default

"md"

speed

Description

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

Type

string

Default

"0.45s"

thickness

Description

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

Type

string

Default

"2px"

variant

Description

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

Type

string