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:
--jkl-skeleton-sweeper-color
--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.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
variant | large | Ikke påkrevd | LoaderVariant | undefined | |
textDescription | ingen | Påkrevd | string | |
className | ingen | Ikke påkrevd | string | undefined | |
dataTestAutoId | jkl-loader | Ikke påkrevd | string | undefined | |
politeness | polite | Ikke påkrevd | "assertive" | "polite" | undefined | |
role | ingen | Ikke påkrevd | AriaRole | undefined | |
inline | false | Ikke påkrevd | boolean | undefined | |
delay | Antall millisekunder komponenten vil vente før den rendrer | 0 | Ikke påkrevd | number | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
textDescription | Vennligst vent | Ikke påkrevd | string | undefined | |
politeness | polite | Ikke påkrevd | "assertive" | "polite" | undefined | |
role | ingen | Ikke påkrevd | AriaRole | undefined | |
delay | Antall millisekunder komponenten vil vente før den rendrer | 0 | Ikke påkrevd | number | undefined |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
style | ingen | Ikke påkrevd | CSSProperties | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
className | ingen | Ikke påkrevd | string | undefined | |
width | ingen | Påkrevd | number | |
shape | ingen | Ikke påkrevd | "circle" | "rect" | undefined |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
style | ingen | Ikke påkrevd | CSSProperties | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
checkboxes | ingen | Påkrevd | number | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
labelProps | ingen | Ikke påkrevd | SkeletonLabelProps | undefined | |
inputProps | ingen | Ikke påkrevd | SkeletonElementProps | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
shape | rect | Ikke påkrevd | "circle" | "rect" | undefined | |
width | ingen | Påkrevd | number | |
height | ingen | Påkrevd | number |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
style | ingen | Ikke påkrevd | CSSProperties | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
labelProps | ingen | Ikke påkrevd | SkeletonLabelProps | undefined | |
inputProps | ingen | Ikke påkrevd | SkeletonElementProps | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
labelProps | ingen | Ikke påkrevd | SkeletonLabelProps | undefined | |
inputProps | ingen | Ikke påkrevd | SkeletonElementProps | undefined | |
radioButtons | ingen | Påkrevd | number |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined | |
width | ingen | Ikke påkrevd | number | undefined |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
style | ingen | Ikke påkrevd | CSSProperties | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
labelProps | ingen | Ikke påkrevd | SkeletonLabelProps | undefined | |
inputProps | ingen | Ikke påkrevd | SkeletonElementProps | undefined | |
forceCompact | ingen | Ikke påkrevd | boolean | undefined |