---
title: 'Spinner'
description: 'Spinner is used for indicating a loading state of a component or page.'
github: 'https://github.com/blockstack/ux/tree/master/packages/ui/src/spinner'
---

# Spinner

Spinner is a loading component used to display loading states for our various components. Use anytime you want to indicate
the application is loading in some way. This component is used for the [`isLoading` state of the Button component](/components/button#button-loading-state).

## Import

```tsx live=false
import { Spinner } from '@blockstack/ui';
```

## Usage

> Add `aria-busy="true"` to the component that triggered the loading state while the spinner is shown.

```jsx
<Stack>
  <Box>
    <Spinner size="sm" />
  </Box>
  <Box>
    <Spinner size="md" />
  </Box>
  <Box>
    <Spinner size="lg" />
  </Box>
  <Box>
    <Spinner size="xl" />
  </Box>
</Stack>
```

## Props

The Spinner composes the `Box` component so you can pass props for
`Box`. These are props related to the Spinner component.

| Name          | Type          | Default        | Description                                                                                                                        |
| ------------- | ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `size?`       | `SpinnerSize` | `md`           | The size of the spinner. [See type definition](https://github.com/blockstack/ux/blob/master/packages/ui/src/spinner/types.ts#L14). |
| `emptyColor?` | `string`      |                | The color of the empty area in the spinner.                                                                                        |
| `color?`      | `string`      | `currentColor` | The color of the spinner.                                                                                                          |
| `thickness?`  | `string`      | `2px`          | The thickness of the spinner.                                                                                                      |
| `speed?`      | `string`      | `0.85s`        | The speed of the spinner animation.                                                                                                |
| `label?`      | `string`      | `Loading...`   | For accessibility, it's important to add a fallback loading text.                                                                  |
