Hopp til innhold

Loader

En lasteindikator viser brukeren at systemet jobber. Vi bruker lasteindikatoren når vi har handlinger eller prosesser som tar lengre tid enn ett sekund. For større seksjoner anbefaler vi skeleton loaders, heller enn én stor lasteindikator.

Plasser lasteindikatoren sammen med handlingen som utløser den. Den kan ha ulik posisjon og størrelse, avhengig av konteksten den skal fungere i. Lasteindikatoren tar farge etter teksten rundt.

Foreløpig beregnet pris:

Riktig

Bruk passende størrelse

Foreløpig beregnet pris:

Feil

Bruk upassende størrelse

Dersom handlingen vanligvis tar under et halvt sekund, men kan ta lenger tid enn ett sekund, er det lurt å vente med å vise loaderen til vi ser at den trengs tilbakemelding til brukeren.

Riktig

Hopp over loader for raske handlinger

Feil

Vis et kort glimt av en loader

Skeleton loader

En skeleton loader er egentlig en samling med omriss som likner noenlunde på hva som vil vises når lastingen er ferdig. Her trenger det ikke være pixelperfekt. Poenget er at man skal få en bedre brukeropplevelse når siden etter hvert bytter ut lasteindikatoren med innholdet.

For at animasjonen skal fungere best mulig er det to CSS-variabler det er greit å ha et forhold til:

  1. --jkl-skeleton-sweeper-color
  2. --jkl-skeleton-sweep-duration

Animasjonens effekt blir penest om --jkl-skeleton-sweeper-color er lik bakgrunnsfargen til innholdet. Som standard er den satt til snøhvit i lyst tema og granitt i mørkt tema, det vil si likt standard bakgrunnsfarge. Om du skal ha en skeleton loader på en annen bakgrunnsfarge bør du sette --jkl-skeleton-sweeper-color lik den bakgrunnsfargen med CSS i ditt eget prosjekt.

Hurtigheten på animasjonen avhenger av bredden på innholdet. Derfor kan det være lurt å justere standardverdien med --jkl-skeleton-sweep-duration.

Hvor bruker vi loaders?

  • I knapper som brukeren har klikket på
  • På et kort eller i felt der noe blir beregnet før innholdet vises.

Hvor bruker vi skeleton loaders?

  • For å vise omriss av tabeller vi er i ferd med å laste inn
  • Som overgang mellom sider hvor vi ikke har noe innhold å vise uten å vente

React API

Her finner du en oversikt over props på komponentene i pakken.