Loader

Release dato: 14.02.2024

Sist oppdatert: 16.05.2025

Loader gir en visuell indikasjon på at noe lastes, og forteller brukeren at systemet jobber i bakgrunnen. Den bidrar til å redusere usikkerhet, og hjelper brukeren med å forstå at de må vente et øyeblikk før innholdet er klart.

Formålet med loader er å synliggjøre systemstatus og forbedre brukeropplevelsen i situasjoner med ventetid.

Live demo

Relaterte komponenter

Varianter

Typer

I Punkt finnes det to ulike typer loader

Type	Beskrivelse
Oslo-loader (shapes)	En animert bølge med Oslo-former som skifter mellom brandfargene. Egner seg godt til hele sider eller større seksjoner
Spinner	En klassisk roterende sirkel. Kommer i blå og regnbue, men du kan også bruke andre brandfarger. Egner seg godt i små elementer og komponenter, som knapper

Farger

Spinner-varianten kan brukes i to ulike fargekombinasjoner

Variant	Beskrivelse
Blue	Statisk Oslo-blå, brukes i formelle og nøytrale grensesnitt
Rainbow	Animeres med flere brandfarger, mer leken

Størrelser

Begge variantene kommer i tre størrelser

Variant	Beskrivelse
Small	Brukes der plassen er begrenset, for eksempel inne i en knapp eller ved siden av et skjemafelt. Passer best med spinner-variant
Medium (default)	Standardstørrelse som passer godt til komponenter og seksjoner. Fungerer både med spinner og Oslo-loader
Large	For større flater eller når loaderen skal være et sentralt blikkfang, som ved fullskjerm-visning

Retningslinjer for bruk

Bruk loader når

systemet henter data og brukeren må vente i mer enn 300 ms
du laster inn hele sider, seksjoner eller komponenter
du trenger å gi visuell tilbakemelding for handlinger (for eksempel i en button)

Unngå loader når

innholdet laster raskere enn 300 ms (brukeren vil ikke bli påvirket)
det er mer effektivt å vise skeleton eller tomtilstand mens man venter
du allerede bruker en annen visuell indikator for status, som progressbar eller alert

Velg riktig variant og plassering

Bruk Oslo-loader for større flater eller fullskjerm. Spinneren passer bedre i mindre områder, som knapper, skjemafelt eller under tabs.

Legg til tekst ved lang ventetid

Dersom ventetiden overstiger 4 sekunder, bør du legge til en forklarende tekst som informerer brukeren om hva som skjer. Eksempel: «Laster inn oversikt over søknader…»

Dersom innholdet ikke lastes som forventet, vurder å bruke en alert for å informere om feilen eller hva brukeren bør gjøre videre.

Gjør slik

Unngå

Responsivitet

Automatisk skalering

Loader tilpasser seg tilgjengelig plass. På små skjermer legges loaderen midtstilt, med tekst under om nødvendig. Spinneren er godt egnet til kompakte flater, mens Oslo-loaderen gir bedre effekt på større skjermer eller flater.

Tilgjengelighet på mobil

Når du bruker loader på mobil og nettbrett, må du teste at

teksten under loaderen er synlig og lesbar
animasjonen holder seg innenfor synsfeltet
kontrasten er god nok, særlig ved bruk av egendefinerte farger
trykkflater og knapper ikke havner bak en fullskjerm-loader

Universell utforming

Lesbarhet og skjermleser

Loader må kunne oppfattes av brukere som navigerer med skjermleser eller tastatur.

Du må

legge til aria-label="Laster inn" eller bruke role="status" med en beskrivende tekst
sørge for at loaderen fjernes fra DOM når lasting er fullført
merke dekorative animasjoner med aria-hidden="true" slik at de ikke leses opp

I tillegg skal wrapper-elementet bruke aria-live="polite" for å gi skjermleseren beskjed om at innhold oppdateres.

Bruk aria-busy="true" på containeren mens innhold lastes inn, og sett det til false når oppdateringen er ferdig. Dette gir skjermleseren tydelig signal om at noe er i endring og at den bør vente før den leser opp nytt innhold.

Dersom det ikke sendes inn tekst til komponenten, brukes aria-label="Loading" som fallback for å gi nødvendig kontekst.

Tastaturnavigasjon og fokus

En loader skal ikke blokkere interaksjon uten å forklare hvorfor. Hvis du bruker fullskjerm-loader, pass på at den ikke hindrer fokus eller skjuler viktige elementer. Det må være tydelig at brukeren må vente.

Mer om universell utforming av loader og statusbeskjeder:

Anatomi

Element	Beskrivelse
1. Loader-element	Enten Oslo-logo (shapes) eller spinner
2. Tekst	Valgfri beskrivelse som vises visuelt og leses opp av skjermleser

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-loader");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Overstyring av sti til loading-animasjon

I likhet med Icon-komponentens overstyring av sti til ikoner kan man overstyre stien til loading-animasjonen globalt ved å sette sti i window.pktAnimationPath.

Props og tokens

Prop	Type	Beskrivelse
`message`	`string`	Tekst som vises under loaderen
`size`	`small` `medium` `large`	Størrelse på loaderen
`variant`	`rainbow` `blue` `shapes`	Fargevariant på loaderen
`delay`	`number`	Tid i millisekunder før loaderen vises
`inline`	`boolean`	Loader er en del av sidens floatelementer
`isLoading`	`boolean`	Loader er aktiv

Slot (children)	Beskrivelse
`default`	Innholdet som lastes inn

Farger

Element	CSS Variabel
Tekst