# DotsLoader

> Animert tre-prikker lasteindikator for inline og aktive prosesser.

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

DotsLoader viser tre animerte prikker som bouncer i sekvens. Den passer for inline lastetilstander, chat-typing-indikatorer og streaming-tilstander der `Spinner` ville vært for dominerende visuelt.

## Importering

```tsx

```

## Grunnleggende bruk

```tsx

```

## Størrelser

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

## Egendefinert label

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

```tsx

```

## Inline i tekst

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

## Chat-typing-indikator

```tsx
<div style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", borderRadius: "0.75rem", background: "var(--color-neutral-surface-default)" }}>
  
</div>
```

## Bruksanbefalinger

  - **Gjør: Bruk for inline og aktive prosesser** — DotsLoader passer for chat-typing-indikatorer, streaming-svar og inline lastetilstander i tekst.
  - **Unngå: Ikke bruk for generell lasting av sider eller store seksjoner** — Bruk Spinner for generell lasting, og Skeleton når du kjenner formen av innholdet som lastes.

## Tilgjengelighet

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

## Props

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