# Spinner



> Spinner component is an animated icon that lets users know content or result of an action is being loaded.

## Examples

### Default

```tsx
import { Spinner } from "@kesko/components";

export default () => <Spinner size="md" />;

```

```html
<span class="k-spinner" role="status" aria-label="Loading" style="color: var(--k-color-accent)">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</span>
```

### Sizes

```tsx
import { Spinner, Stack } from "@kesko/components";

export default () => (
  <Stack direction="row" gap="md" align="center" style={{ color: "var(--k-color-accent)" }}>
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
    <Spinner size="xl" />
    <Spinner size="2xl" />
  </Stack>
);

```

```html
<div class="k-stack k-stack-row k-stack-align-center" style="color: var(--k-color-accent); gap: var(--k-space-md)">
  <span class="k-spinner k-spinner-sm" role="status" aria-label="Loading">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </span>
  <span class="k-spinner" role="status" aria-label="Loading">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </span>
  <span class="k-spinner k-spinner-lg" role="status" aria-label="Loading">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </span>
  <span class="k-spinner k-spinner-xl" role="status" aria-label="Loading">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </span>
  <span class="k-spinner k-spinner-2xl" role="status" aria-label="Loading">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </span>
</div>
```


## Props

- `size` — `"sm" | "md" | "lg" | "xl" | "2xl"` (default: `"md"`) The size of the spinner.
- `label` — `string` (default: `"Loading"`) Accessible label for the spinner. Defaults to "Loading".

## CSS custom properties

- `--k-spinner-color` (default: `currentColor`) Overrides the spinner color.
- `--k-spinner-size` (default: `var(--k-size-component-spinner)`) Overrides the spinner size.