Skip to main content

Spinner

Spinner viser at noe lastes inn eller at en operasjon pågår. Den er ikke-interaktiv og kommuniserer utelukkende tilstand.

Egnet til​

  • Sideinnlasting eller data-henting som tar mer enn ~300 ms
  • Bakgrunnsoperasjoner der brukeren bør vite at noe skjer
  • Inline-lasting i deler av en side

Uegnet til​

  • Fremdrift der prosenten er kjent — bruk ProgressBar i stedet
  • Svært korte operasjoner (under ~300 ms) der spinneren vil flimre
  • Som eneste tilbakemelding på en brukerhandling uten etterfølgende bekreftelse

Kom i gang​

Result
Loading...
Kode
Live Editor
<Spinner />

Eksempler​

Med synlig tekst​

label vises under hjulet og brukes som aria-label om ikke loadingLabel er satt.

Result
Loading...
Kode
Live Editor
<Spinner label="Laster inn data..." />

Størrelser​

Result
Loading...
Kode
Live Editor
<>
  <Spinner size="sm" aria-label="Liten spinner" />
  <Spinner size="md" aria-label="Middels spinner" />
  <Spinner size="lg" aria-label="Stor spinner" />
</>

Universell utforming​

Hva du selv må sørge for​

  • Gi alltid en meningsfull loadingLabel — standard-labelen (Laster...) er et nødanker. Gi en kontekstuell tekst som loadingLabel="Henter kontooversikt..." der du kan.
  • Sørg for at spinneren er synlig i konteksten — farge-token (--ix-color-border-info-default) kan ha dårlig kontrast mot noen bakgrunner. Sjekk kontrasten i den faktiske konteksten.
  • Gi etterfølgende tilbakemelding — skjermlesere hører status-meldingen, men bør også høre hva som skjedde etter lasting. Sørg for at resultatsiden eller innholdet er annonsert korrekt.

Hva komponenten gjør automatisk​

  • role="status" setter en ARIA live region (politeness: polite) — skjermlesere annonserer aria-label-verdien uten å avbryte pågående tale.
  • aria-label settes automatisk basert på loadingLabel → label → 'Laster...'.
  • prefers-reduced-motion stopper animasjonen helt for brukere som har slått av bevegelse i operativsystemet.

Skjermleser

  • Når spinneren vises: skjermlesere annonserer aria-label-verdien via role="status" (polite live region)
  • Standard: "Laster..."
  • Med loadingLabel: den angitte teksten leses opp
  • Med label (uten loadingLabel): label-teksten brukes som aria-label og leses opp

WCAG-kriterier​

Sist gjennomgått: 2026-05-28 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier4 ditt ansvar · 3 håndtert · 51 ikke relevant · 0 ikke på plass
Ditt ansvar (4)
KriteriumNivåHva du må gjøre
4.1.3 StatusmeldingerAAGi en kontekstuell loadingLabel. Standard-labelen ('Laster...') gir ingen kontekst om hva som lastes. Bruk loadingLabel='Henter kontooversikt...' e.l. slik at skjermleser-brukere forstår hva operasjonen gjelder.
2.4.6 Overskrifter og ledeteksterAAGi en kontekstuell loadingLabel. Standard-labelen ('Laster...') gir ingen kontekst om hva som lastes. Bruk loadingLabel='Henter kontooversikt...' e.l. slik at skjermleser-brukere forstår hva operasjonen gjelder.
1.4.11 Kontrast for ikke-tekstlig innholdAASjekk kontrast i konteksten. Spinner-hjulet bruker --ix-color-foreground-main-default. Denne fargen er optimalisert for standard bakgrunn. Dersom spinneren vises over annen bakgrunn (farget panel, bilde) må konsumenten verifisere at kontrastforholdet oppfyller 3:1 (WCAG 1.4.11 for UI-komponenter).
4.1.3 StatusmeldingerAAGi etterfølgende tilbakemelding når lasting er ferdig. Spinner annonserer at noe lastes, men gir ingen tilbakemelding om resultatet. Sørg for at innholdet som vises etter lasting er korrekt annonsert — enten via en ny ARIA live region, fokus-flytt, eller naturlig DOM-rekkefølge.
Håndtert av komponenten (3)
KriteriumNivåHva komponenten gjør
1.3.1 Informasjon og relasjonerArole="status" gir semantisk live region. Tilgjengelig navn settes via aria-label automatisk.
2.2.2 Pause, stopp, skjulAprefers-reduced-motion: reduce stopper animasjonen helt — ingen bevegelse for brukere med nedsatt toleranse.
4.1.3 StatusmeldingerAArole="status" (polite live region) annonserer aria-label for skjermlesere uten å avbryte pågående tale.
Ikke relevant (51)
KriteriumNivåHvorfor ikke relevant
1.1.1 Ikke-tekstlig innholdASpinner har ingen ikke-tekstlig innhold — animasjonen er CSS-generert og ikke en <img>.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)AIngen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)AIngen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)AIngen medieelementer.
1.2.4 Teksting (direkte)AAIngen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)AAIngen medieelementer.
1.3.2 Meningsfull rekkefølgeAKun ett element — ingen rekkefølge-problematikk.
1.3.3 Sensoriske egenskaperASpinner gir ingen instruksjoner.
1.3.4 VisningsretningAASpinner har ingen orientasjons-avhengig funksjonalitet.
1.3.5 Identifiser formål med inndataAAIkke et skjemafelt.
1.4.1 Bruk av fargeASpinner formidler ikke informasjon med farge alene — animasjonen + aria-label kommuniserer tilstand.
1.4.2 Styring av lydAIngen lyd.
1.4.3 Kontrast (minimum)AASpinner har ingen tekst (label er valgfri og arver foreldres typografi).
1.4.4 Endre tekststørrelseAAIngen tekst i selve komponenten.
1.4.5 Bilder av tekstAAIngen bilde av tekst.
1.4.10 OmflytAASpinner er inline og reflower naturlig.
1.4.12 TekstavstandAAIngen typografi-egenskaper i selve komponenten.
1.4.13 Innhold ved hover eller fokusAASpinner er ikke hover/fokus-utløst innhold.
2.1.1 TastaturASpinner er ikke-interaktiv — ingen tastaturbetjening er nødvendig.
2.1.2 Ingen tastaturfelleASpinner er ikke-interaktiv — ingen fokus-felle.
2.1.4 TastatursnarveierAIngen hurtigtaster.
2.2.1 Justerbar hastighetASpinner har ingen tidsbegrensning.
2.3.1 Terskelverdi på tre glimtAAnimasjonen blinker ikke — jevn rotasjon under terskel for anfall.
2.4.1 Hoppe over blokkerASidekrav — gjelder ikke enkeltkomponenter.
2.4.2 SidetitlerASidekrav — gjelder ikke enkeltkomponenter.
2.4.3 FokusrekkefølgeASpinner er ikke fokuserbar.
2.4.4 Formål med lenke (i kontekst)ASpinner er ikke en lenke.
2.4.5 Flere måterAASidekrav — gjelder ikke enkeltkomponenter.
2.4.6 Overskrifter og ledeteksterAASpinner er ikke en overskrift eller label.
2.4.7 Synlig fokusAASpinner er ikke-interaktiv og mottar ikke fokus.
2.4.11 Fokus ikke skjult (minimum)AASpinner er ikke-interaktiv og mottar ikke fokus.
2.5.1 PekerbevegelserASpinner er ikke-interaktiv.
2.5.2 Avbryt pekerASpinner er ikke-interaktiv.
2.5.4 BevegelsesaktiveringASpinner er ikke-interaktiv.
2.5.6 Samtidige inndatamekanismerASpinner er ikke-interaktiv.
2.5.7 DrabevegelserASpinner er ikke-interaktiv.
2.5.8 Målstørrelse (minimum)AASpinner er ikke-interaktiv.
3.1.1 Språk på sidenAIkke relevant for en enkeltkomponent.
3.1.2 Språk på deler av innholdAASpinner endrer ikke språk.
3.2.1 Ved fokusASpinner mottar ikke fokus.
3.2.2 Ved inndataASpinner har ingen skjemainput.
3.2.3 Konsistent navigasjonAASidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjonAASystemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelpASidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feilASpinner er ikke et skjemafelt.
3.3.2 Ledetekster eller instruksjonerASpinner er ikke et skjemafelt.
3.3.3 Forslag ved feilAASpinner er ikke et skjemafelt.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)AASpinner er ikke et skjemafelt.
3.3.7 Redundant oppføringASpinner er ikke et skjemafelt.
3.3.8 Tilgjengelig autentisering (minimum)AASpinner er ikke et skjemafelt.
4.1.2 Navn, rolle, verdiASpinner er ikke-interaktiv — ingen navn/rolle/verdi-krav utover status-rollen.

Props / API​

PropTypeStandardBeskrivelse
size'sm' | 'md' | 'lg''md'Størrelse på hjulet
labelstringSynlig tekst under hjulet. Brukes som aria-label om loadingLabel ikke er satt
loadingLabelstring'Laster...'Tilgjengelig navn for skjermlesere. Overstyrer label
classNamestringEkstra CSS-klasser

I tillegg støttes alle standard HTML <div>-attributter (id, style, aria-* osv.).

Tilpasning med CSS​

Tilgjengelige klasser og data-attributter​

Element/tilstandSelektor / attributt
Spinner.ix-spinner
Litendata-size="sm" (24×24 px)
Middelsdata-size="md" (40×40 px, standard)
Stordata-size="lg" (64×64 px)

Eksempel: ren HTML​

<div class="ix-spinner" role="status" aria-label="Laster..." data-size="md"></div>

<div class="ix-spinner" role="status" aria-label="Laster inn konto..." data-size="lg">
  Laster inn konto...
</div>

Relatert​

Rapporter feil på denne siden