Intro
Loader er en visuell indikasjon på at noe laster eller tar tid. Selv om brukere får lite informasjon om hva som skjer, får de en forsikring om at noe skjer.
Egnet til:
- Laste innhold på siden
- Indikere når en handling har midlertidig stoppet applikasjonen
- Indikere lasting som tar mer enn 1 sekund
- Indikere at data blir lagret når bruker trykker "lagre"
Uegnet til:
- Når lasting tar mindre enn 1 sekund
- Å vise at enkeltelementer på siden blir lastet inn (vurder Skeleton)
Eksempler
Prop-en 'transparent' fjerner bakgrunnselementet på Loader.
Varianter
Størrelser
Loader-komponenten tilbyr flere størrelser som er tilpasset forskjellge formål. Hvilken størrelse som passer i hvert enkelt tilfelle avhenger i stor grad av størrelsen på elementene som lastes og tilgjengelig plass.
Varianter
Loader tilbyr tre varianter:
- Neutral blir ofte brukt for innholdslasting
- Interaction for interaktive elementer
- Inverted for mørkere flater
Retningslinjer
Loader brukes for å kommunisere til brukerne at systemet er opptatt med noe. Fordelen med Loader sammenliknet med Skeleton er at du kan bruke den på liten plass, f.eks. i en Button. Husk at Loader bør brukes bevisst, spesielt i mindre elementer der konteksten rundt hvorfor noe laster ikke er så klar.
Ventetid
Om bruker må vente vil Loader bidra til å redusere usikkerhet. Men det tar ikke lang tid før folk blir utålmodig og/eller forvirra over at ingenting skjer. Hvis ventetiden overstiger 9 sekunder, bør bruker se en forklaring sammen med Loader, eller en fremdriftsindikator og tekst som forklarer hva maskinen jobber med.
Relevante lenker
Når bør man ikke bruke Loader?
Hvis bruk av Loader fører til Cumulative Layout Shift (CLS) bør du heller bruke Skeleton.
Tilgjengelighet
Vi anbefaler å lese artikkelen om WCAG 4.1.3 før du bruker Loader i løsningen din.
Props
Loader
size?
- Type:
"3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall"
- Default:medium
- Description:
title?
- Type:
ReactNode
- Default:venter...
- Description:
transparent?
- Type:
boolean
- Default:false
- Description:
variant?
- Type:
"neutral" | "interaction" | "inverted"
- Default:neutral
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<SVGSVGElement>
- Description:
Tokens
Token | Fallback |
---|---|
--ac-loader-stroke | --a-border-default |
--ac-loader-stroke-bg | --a-surface-active |
--ac-loader-neutral-stroke | --a-border-default |
--ac-loader-interaction-stroke | --a-border-action |
--ac-loader-inverted-stroke | --a-border-on-inverted |
--ac-loader-inverted-stroke-bg | --a-border-on-inverted-subtle |