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

Skeleton

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Antall elementer
    • Ventetid
    • Når bør man ikke bruke skeleton?
  • Tilgjengelighet
  • Props
    • Skeleton
  • Tokens

Intro

Skeleton brukes til å gi brukeren en midlertidig visuell tilbakemelding mens innholdet lastes eller behandles. Den er en enkel og minimalistisk versjon av det faktiske innholdet som skal vises.

Egnet til:

  • Minske oppfattet lastetid
  • Minske layout-shift ved flere elementer

Uegnet til:

  • Ved lengre lastetider uten ytterligere informasjon

Har du innspill til komponenten?

Send forslag

Eksempler

I de fleste tilfellene vil du bruke 'width' og 'height' for å manuelt bygge opp en visuell representasjon av elementet du skal emulere. Disse settes da rett på style, slik at px, rem eller f.eks. '100%' fungerer.

SandboxSandbox
Åpne eksempel i nytt vindu

'text' (standard) representerer en enkel linje med tekst. 'circle', 'rectangle' og 'rounded' gir forskjellig visuell representasjon av elementet.

Bruk av children vil gi en grå blokk som ofte ikke ligner på det faktiske elementet. Derfor anbefaler vi å manuelt bygge elementet ved hjelp av flere skeletons og 'height' + 'width'.

Retningslinjer

Skeleton brukes for å kommunisere til brukerne at innholdet lastes. Fordelen med Skeleton sammenliknet med Loader er at du kan forme Skeleton-elementene helt likt innholdet som vil vises. Brukeren får et hint om hva som kommer og grensesnittet vil være (nesten) uendret når innholdet er klart.

Antall elementer

Hvis skeleton brukes for å representere et ukjent antall elementer, f.eks. kort i en liste eller søketreff bør man som tommelfingerregel alltid vise eksakt antall eller et mindre antall skeletons. Det kan oppleves som at noe gikk galt hvis et element som var der tidligere, ikke er der når alt er lastet.

Ventetid

Om bruker må vente på innholdet vil Skeleton bidra til at ventingen oppleves kortere. Men det tar ikke lang tid før folk blir utålmodig og/eller forvirra over at ingenting skjer. Når du bruker Skeleton må ikke ventetiden for brukerne overstige 9 sekunder. Om ventetiden er lenger enn det bør bruker se en forklaring, eller vis en fremdriftsindikator og tekst som forklarer hva maskinen jobber med.

LenkerLenker

  • Research på Progress indicators

Når bør man ikke bruke skeleton?

Skeleton har som formål å representere hva som faktisk vil vises når alt er lastet. Dette kan være problematisk hvis man bruker komponenten i f.eks. søk med ukjent antall treff. Hvis bruker ser flere "resultater" representert med skeleton, men får 0 søketreff når alt er lastet kan dette tolkes som at noe gikk feil. I disse tilfellene vil Loader ofte være et bedre alternativ.

Tilgjengelighet

Komponenten setter både visiblity: none, aria-hidden og pointer-events: none på elementet. Skjermlesere vil derfor ikke vite at noe lastes. Vurder om det er nødvendig å legge til aria-live-regioner med informasjon til skjermlesere. En alternativ løsning kan være å legge seksjonen med Skeleton i en section med aria-label.

Ved lengre lastetider, eller hvis noe har gått galt bør bruker gjøres oppmerksom på dette.

Props

Skeleton

variant?

  • Type:
    "circle" | "rectangle" | "rounded" | "text"
  • Default:
    text

height?

  • Type:
    string | number
  • Description:

width?

  • Type:
    string | number
  • Description:

as?

  • Type:
    "div" | "span"
  • Default:
    "div"
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

Opacity er brukt som teknikk for 'pulse'-animasjonen, derfor kan bare bakgrunnsfarge endres på.

TokenFallback
--ac-skeleton-bg--a-surface-neutral-moderate
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

  • Loader thumbnail
    Loader

© 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