# Spinner

Shows that something is loading.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Spinner.tsx)

## Overview

A spinner is an indeterminate loading indicator that draws in the current text color.

Pass `aria-label` to say what is loading. Prefer `Skeleton` when the shape of the loading content is known.

## Examples

### Basic

```tsx
import { Spinner } from '@tempoxyz/ds'

export function Demo() {
  return <Spinner aria-label="Loading transactions" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Spinner/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Spinner, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Spinner aria-label={`Loading ${size}`} key={size} size={size} />
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', gap: '4' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Spinner/Size.tsx)

## Guidelines

TODO: Write guidelines for Spinner.