Alpha

DotsLoader

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

import { DotsLoader } from "@kilden/designsystem";

Grunnleggende bruk

<DotsLoader />

Størrelser

<div style={{ display: "flex", alignItems: "center", gap: "1.5rem" }}>
<DotsLoader size="sm" />
<DotsLoader size="default" />
<DotsLoader size="lg" />
</div>

Egendefinert label

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

<DotsLoader label="Skriver..." />

Inline i tekst

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

Chat-typing-indikator

<div style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem", borderRadius: "0.75rem", background: "var(--color-neutral-surface-default)" }}>
<DotsLoader size="sm" label="Skriver..." />
</div>

Bruksanbefalinger

Henter resultater

Bruk for inline og aktive prosesser

DotsLoader passer for chat-typing-indikatorer, streaming-svar og inline lastetilstander i tekst.

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