---
id: spinner
category: feedback
title: Spinner
package: '@chakra-ui/spinner'
description:
  Spinners provide a visual cue that an action is processing awaiting a course
  of change or a result.
---

## Import

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

## Usage

```jsx
<Spinner />
```

### Spinner with Color

```jsx
<Spinner color='red.500' />
```

### Spinner with different size

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

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