Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Loader

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.

StabilOppdatert 30. april 2025
Github FigmaEndringslogg

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).
  • Lengre prosesser der varighet eller progresjon er kjent (se ProgressBar).

Eksempler

Retningslinjer

Ventetid

Det er god UX å vise en tekst sammen med Loader som forklarer hvorfor brukeren må vente. Når ventetiden har passert 9 sekunder er dette påkrevd. Dette bidrar til å redusere usikkerhet/forvirring hos brukeren.

Lenker

Unngå at innhold forskyves

Hvis bruk av Loader fører til Cumulative Layout Shift (CLS) bør du heller bruke Skeleton.

Tilgjengelighet

Vi anbefaler å lese WCAG 4.1.3 Statusbeskjeder før du bruker Loader i løsningen din.

Props

Loader

size?

  • Type:
    "3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall"
  • Default:
    "medium"
  • Description:

    Changes Loader width/height 88px | 64px | 40px | 32px | 24px | 20px | 16px

title?

  • Type:
    ReactNode
  • Default:
    "Venter…"
  • Description:

    Title prop on svg

transparent?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Sets svg-background to transparent

variant?

  • Type:
    "neutral" | "interaction" | "inverted"
  • Default:
    "neutral"
  • Description:

    Colored variants for Loader

data-color?

  • Type:
    AkselColor
  • Description:

    Overrides loader-color

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<SVGSVGElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

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