# Spinner

> Source: https://design.nanatec.co.ke/components/spinner/
> An animated, accessible loading indicator.

An animated, accessible loading indicator.

## Preview

```html
<nana-spinner></nana-spinner>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/spinner";
```

## Basic usage

```html
<nana-spinner></nana-spinner>
```

## Sizes & variants

```html
<nana-spinner size="xs"></nana-spinner>
<nana-spinner size="sm"></nana-spinner>
<nana-spinner size="md"></nana-spinner>
<nana-spinner size="lg"></nana-spinner>
<nana-spinner size="xl"></nana-spinner>
<nana-spinner size="md" variant="success"></nana-spinner>
<nana-spinner size="md" variant="warning"></nana-spinner>
<nana-spinner size="md" variant="danger"></nana-spinner>
<nana-spinner size="md" variant="secondary"></nana-spinner>
```

## API

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-spinner-color` | — | Override the spinner color |
| `--nana-spinner-duration` | — | Override the rotation duration |

## CSS Parts

| Part | Description |
|---|---|
| `spinner` | The animated SVG mark |

## Related components

<ul class="related not-content">
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/badge/">Badge</a></li>
  <li><a href="/components/skeleton/">Skeleton</a></li>
  <li><a href="/components/tag/">Tag</a></li>
  <li><a href="/components/progress-bar/">Progress Bar</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-spinner--docs