# Spinner

> Roterende lasteindikator for ubestemte lastetilstander.

[Kildekode på GitHub](https://github.com/bekk/designsystem/blob/main/packages/designsystem/src/ui/spinner.tsx)

Spinner viser at noe lastes når du ikke vet hvor lang tid det tar. Bruk `Skeleton` i stedet hvis du kjenner formen på innholdet som lastes.

## Importering

```tsx

```

## Grunnleggende bruk

```tsx

```

## Størrelser

```tsx
<div style={{ display: "flex", alignItems: "center", gap: "1.5rem" }}>
  
  
  
</div>
```

## Egendefinert label

Spinnerens `aria-label` leses opp av skjermlesere. Standard er `"Laster..."`.

```tsx

```

## Sentrert i en container

```tsx
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "2rem" }}>
  
</div>
```

## Med tekst

```tsx
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  
  <span>Laster inn data...</span>
</div>
```

## Bruksanbefalinger

  - **Gjør: Bruk for ubestemt lasting** — Spinner passer når du ikke vet hvor lang tid en operasjon tar — f.eks. API-kall eller innlogging.
  - **Unngå: Ikke bruk når du kjenner formen av innholdet** — Hvis du vet hva som lastes (tekst, bilder, kort), bruk Skeleton i stedet — det gir en mer forutsigbar opplevelse.

## Tilgjengelighet

- Har `role="status"` som annonserer lastetilstanden til skjermlesere
- `aria-label` (standard: `"Laster..."`) leses opp automatisk — tilpass den til konteksten
- SVG-grafikken er skjult for skjermlesere

## Props

| Prop        | Type                        | Default       | Beskrivelse                         |
| ----------- | --------------------------- | ------------- | ----------------------------------- |
| `size`      | `"sm" \| "default" \| "lg"` | `"default"`   | Størrelse på spinnerens diameter    |
| `label`     | `string`                    | `"Laster..."` | Tilgjengelig label for skjermlesere |
| `className` | `string`                    | —             | Ekstra CSS-klasser                  |