Alpha

Spinner

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

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

<Spinner />

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

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

<Spinner label="Henter resultater..." />

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

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

Sender inn skjema...

Bruk for ubestemt lasting

Spinner passer når du ikke vet hvor lang tid en operasjon tar — f.eks. API-kall eller innlogging.

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.

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

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