# Spinner
> A loading state for quick asynchronous tasks.

<Callout variant="tip">

Consider using [Skeleton placeholders](/components/skeleton) as an alternative to displaying a spinner.

</Callout>

## Import

```js
import { Spinner } from '@gemini-suite/vera-react';
```

## Examples

### Page/box spinner

Useful when an entire view is loading. You may also use it when content in boxes like cards is being loaded.

```jsx
<Box css={{ padding: '$spacingM', textAlign: 'center' }}>
  <Spinner />
</Box>
```

### Inline spinner

Useful when content in paragraphs and other inline elements is being loaded.

```jsx
<Flex gap="spacingS">
  <Spinner inline />
  <Box css={{ color: '$foregroundNeutralModerate' }}>
    Hang on while we retrieve timeseries
  </Box>
</Flex>
```

### Size

```jsx
<Flex flow="column">
  <Flex>
    <Spinner inline />
    <Spinner inline size="medium" />
    <Spinner inline size="large" />
  </Flex>
  <Box>
    <Spinner size="small" />
  </Box>
</Flex>
```

### Color

Spinner can be re-coloured to meet your needs by using `color` prop.

```jsx
<Flex gap="spacingM">
  <Spinner inline size="medium" color="foregroundInfoModerate" />
  <Spinner size="small" color="foregroundAccentSubtle" />
</Flex>
```

---

## API Reference

<Callout variant="tip">

In addition to the props below, you can pass [Box props](/components/layout/box#api-reference) to control the spacing.

</Callout>

| Name     | Type                                         | Default | Description                                                                                                                                                                                                                                  | Required |
| -------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `css`    | `StitchesCss`                                |         | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants. |          |
| `inline` | `boolean`                                    | `false` | When `true`, renders inline spinner variant.                                                                                                                                                                                                 |          |
| `size`   | `"small" \| "medium" \| "large" \| "xLarge"` |         | The size of the spinner. Note that non-inline spinner only accepts `small` size.                                                                                                                                                             |          |
| `color`  | `ColorToken`                                 |         | The color of the icon. Foreground values from [color tokens](/tokens/colors) are available.                                                                                                                                                  |          |