Intro
Loader gir brukere en visuell indikasjon på at noen laster eller tar tid. Selv om brukere har lite informasjon om hva som skjer, får de en forsikring om at noe skjer.
Egnet til:
- Laste innhold på siden
- Indikere når en handling har midlertidig stoppet applikasjonen
- Indikere lasting som tar mer en noen sekunder
- Indikere at data blir lagret når bruker trykker "lagre"
Uegnet til:
- Når lasting tar mindre en noen få sekunder
- Å vise at enkeltelementer på siden blir lastet inn
Eksempler
Varianter
Størrelser
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.
3xlarge, 2xlarge og xlarge
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.
Large til xsmall
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.
Variant
Loader tilbyr tre varianter.
- Neutral blir ofte brukt for innholdslasting
- Interaction for interaktive elementer
- Inverted for mørkere flater
Transparent
Ved å sette transparent blir bakgrunn-elementet på Loader fjernet. Vil være basert på ønsker bruk om dette er noe man ønsker å gjøre.
Tilgjengelighet
Vi jobber med en artikkel om tilgjengelighet og bruk av ARIA.
I mellomtiden les gjerne denne artikkelen om ARIA Live Regions
Props
Loader
- size?"3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall"
- Changes Loader width/height 88px | 64px | 40px | 32px | 24px | 20px | 16px
- title?ReactNode
- Title prop on svg
- transparent?boolean
- Sets svg-background to transparent
- variant?"neutral" | "interaction" | "inverted"
- Colored variants for Loader
- className? string
- ref? ((string | ((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement>) & (((instance: SVGSVGElement | null) => void) | RefObject<...>)) | null
- 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 @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
Tokens
| Token | Fallback |
|---|---|
| --ac-loader-stroke | --a-border-default |
| --ac-loader-stroke-bg | --a-surface-active |
| --ac-loader-neutral-stroke | --a-border-default |
| --ac-loader-interaction-stroke | --a-border-action |
| --ac-loader-inverted-stroke | --a-border-on-inverted |
| --ac-loader-inverted-stroke-bg | --a-border-on-inverted-subtle |