Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

Loader

Oppdatert 30. april 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Ventetid
    • Unngå at innhold forskyves
  • Tilgjengelighet
  • Props
    • Loader
  • Tokens

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

Har du innspill til komponenten?

Send forslag

Eksempler

Neutral-varianten blir ofte brukt for innholdslasting.

SandboxSandbox
Åpne eksempel i nytt vindu

Interaction-varianten er ment for interaktive elementer.

Inverted-varianten passer bedre på mørkere flater.

Prop-en transparent skjuler bakgrunnselementet på Loader.

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.

LenkerLenker

  • Research på Progress indicators
  • Statusbeskjeder (WCAG 4.1.3)

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:

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

  • Skeleton thumbnail
    Skeleton

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack