Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Skeleton

Oppdatert 19. juni 2023
GithubYarn FigmaEndringslogg

    Beta

    Komponenten er under utvikling, men klar for adopsjon. Vi ønsker gjerne innspill på hvordan den fungerer og hvilke forbedringer vi kan gjøre.

    Send innspill

    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:

    • Indikasjon for lengre lastetider

    Eksempler

    Åpne eksempel i nytt vindu

    Varianter

    • `text` (standard): representerer en enkel linje med tekst
    • `circle`, `rectangle` og `rounded`: Forskjellig visuell representasjon av elementet.

    Height og Width

    I de fleste tilfellene vil du bruke `width` og `height`-prop 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.

    Children

    Når skeleton wrappes rundt andre elementer gjør den noen antagelser rundt størrelser og skaleres basert på elementet.

    Målet til Skeleton er å gi en relativt realistisk representasjon av hva som vil dukke opp. Derfor anbefaler vi å manuelt bygge elementet med bruk av flere skeletons og `height` + `width`. Bruk av children vil gi en grå blokk som ikke ligner på det faktiske elementet i de fleste tilfeller.

    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 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.

    NyheterRelevante lenker

    • 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. Skjermleser vil derfor ikke vite om at noe lastes. Vurder da om det er nødvendig å også legge til `aria-live`-regioner som kan hjelpe.

    En alternativ løsning kan også være å legge seksjonen med Skeleton inn i en `section` med `aria-label`.

    Over lengre lastetider, eller i de tilfellene der noe har gått galt bør bruker gjøres oppmerksom på dette.

    Props

    Skeleton

    variant?"circle" | "rectangle" | "rounded" | "text"
    height? string | number
    When not inferring height from children, you must specify height
    width? string | number
    When not inferring width from children, you must specify width
    className? string
    ref? Ref<HTMLDivElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Skeleton extends HTMLDivElement

    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

    © 2023 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