Spinner

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#

`color`

Description

The color of the spinner

Type

string

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"

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

Description

The size of the Spinner

Type

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

Default

md

`speed`

Description

The speed of the spinner.

Type

string

Default

0.45s

`thickness`

Description

The thickness of the spinner

Type

string

Default

2px

`variant`

Description

The variant of the Spinner

Type

string

The Spinner component is a single part component. All of the styling is applied directly to the Spinner element.

To learn more about styling single part components, visit the Component Style page.

Theming properties#

The properties that affect the theming of the Spinner component are:

size: The size of the spinner. Defaults to md.
colorScheme: The color scheme of the spinner.
variant: The visual variant of the spinner.

Theming utilities#

defineStyle: a function used to create style objects.
defineStyleConfig: a function used to define the style configuration for a single part component.

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

Customizing the default theme#

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
const bold = defineStyle({
  borderWidth: 4, // change the thickness of the spinner
})
export const spinnerTheme = defineStyleConfig({
  variants: { bold },
})

After customizing the spinner theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { spinnerTheme } from './components/spinner'
export const theme = extendTheme({
  components: { Spinner: spinnerTheme },
})

This is a crucial step to make sure that any changes that we make to the spinner theme are applied.

Adding a custom size#

Let's assume we want to include an extra large spinner size. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
const xxl = defineStyle({
  height: 100,
  width: 100,
});
export const spinnerTheme = defineStyleConfig({
  sizes: { xxl },
})
// Now we can use the new `xxl` size
<Spinner size="xxl">...</Spinner>

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Changing the default properties#

Let's assume we want to change the default size, variant of every spinner in our app. Here's how we can do that:

import { defineStyleConfig } from '@chakra-ui/react'
export const spinnerTheme = defineStyleConfig({
  defaultProps: {
    size: 'lg',
    variant: 'bold',
  },
})
// This saves you time, instead of manually setting the
// size and variant every time you use a spinner:
<Spinner size="lg" variant="bold">...</Spinner>