Loader
Intro
Loader er en visuell indikasjon på at noe laster eller tar tid. Selv om brukere får lite informasjon om hva som skjer, får de en forsikring om at noe skjer.
Eksempler
Neutral-varianten blir ofte brukt for innholdslasting.
Interaction-varianten er ment for interaktive elementer.
Inverted-varianten passer bedre på mørkere flater.
Prop-en transparent skjuler bakgrunnselementet på Loader.
Retningslinjer
Ventetid
Det er god UX å vise en tekst sammen med Loader som forklarer hvorfor brukeren må vente. Når ventetiden har passert 9 sekunder er dette påkrevd. Dette bidrar til å redusere usikkerhet/forvirring hos brukeren.
Unngå at innhold forskyves
Hvis bruk av Loader fører til Cumulative Layout Shift (CLS) bør du heller bruke Skeleton.
Tilgjengelighet
Vi anbefaler å lese WCAG 4.1.3 Statusbeskjeder før du bruker Loader i løsningen din.
Props
Loader
size?
- Type:
"3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall" - Default:medium
- Description:
title?
- Type:
ReactNode - Default:"Venter…"
- Description:
transparent?
- Type:
boolean - Default:false
- Description:
variant?
- Type:
"neutral" | "interaction" | "inverted" - Default:neutral
- Description:
data-color?
- Type:
AkselColor - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<SVGSVGElement> - Description:
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 |
