Aksel

Meny

Komponenter / Core

Loader

Oppdatert Stabil
GithubYarn FigmaEndringslogg

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)

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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

TokenFallback
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter