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

<Spinner color='red.500' />

Spinner with different size#

<Stack direction='row' gap={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'
/>

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>

Edit this page on GitHub