Kom i gang som designer

Endringslogg

loader-sandbox

Loader-komponenten tilbyr flere størrelser som er tilpasset forskjellge formål. Under blir noe av den forventede bruken forklart, men finnes ingen mal for hva som er riktig/galt her.

Brukes for å indikere lasting av større flater, eks sidelasting eller laste innhold i en modal. De fleste er sikkert kjent med en lignende spinner som denne når de eks bruker bankid og vi tenker disse størrelsene passer best for det.

Disse størrelsene brukes basert på hva som passer i elementet. Vanlig bruk er eksempel som laste-indikator i en knapp ved lagring av skjema eller for å indikere lasting i andre interaktive elementer. Husk at Loader bør brukes bevist, spesielt i mindre elementer der konteksten rundt hvorfor noe laster ikke er så klar. Hvis noe tar lengre en forventet bør bruker også få mer informasjon om dette.

Neutral blir ofte brukt for innholdslasting

Ved å sette transparent blir bakgrunn-elementet på Loader fjernet. Vil være basert på ønsker bruk om dette er noe man ønsker å gjøre.

Loader gir brukere en visuell indikasjon på at noen laster eller tar tid. Selv om brukere har lite informasjon om 

Vi jobber med en artikkel om tilgjengelighet og bruk av ARIA. 
I mellomtiden les gjerne denne artikkelen om 

Type	`"3xlarge" \| "2xlarge" \| "xlarge" \| "large" \| "medium" \| "small" \| "xsmall"`
Description	Changes Loader width/height 64px \| 40px \| 32px \| 24px \| 20px \| 16px
Default	`medium`

Type	`ReactNode`
Description	Title prop on svg
Default	`venter...`

Type	`boolean`
Description	Sets svg-background to transparent
Default	`false`

Type	`"neutral" \| "interaction" \| "inverted"`
Description	Colored variants for Loader
Default	`neutral`

Loader@navikt/ds-react

Installasjon

Props

Var denne artikkelen til hjelp?