Status |
|
---|---|
Figma | â Publisert |
CSS | â Publisert |
Vue | â Publisert |
React | â Publisert |
Dokumentasjon | â Publisert |
Om komponenten
Loaders gir en visuell indikasjon pÄ at en side eller element laster, og forteller brukeren at det er noe som skjer.
Varianter
Vi har to ulike loaders i Punkt: Oslo-loader og spinner, spinneren kommer i to fargevarianter (blÄ og regnbue). Oslo-loaderen vil skalere opp og ned som en bÞlge i tillegg til Ä endre farger. Alle variantene kan brukes med og uten tekst under.
Du kan ogsÄ benytte dem i ulike stÞrrelser: small, default og large.
Farger
I spinneren kan du velge mellom standard blÄ eller regnbue, du kan selv velge om du Þnsker Ä ta i bruk en av de andre brand-fargene. Oslo-loaderen bytter mellom mÞrkeblÄ og fire av de ulike brand-fargene.
Slik bruker du komponenten
Loader brukes for Ä kommunisere til brukerne at systemet er opptatt med noe, den kan plasseres i midten av en hel side eller pÄ et stÞrre omrÄde.
Om en bruker mÄ vente pÄ innhold sÄ vil en loader vÊre med pÄ Ä bidra til Ä redusere usikkerhet, men det tar ikke lang tid fÞr folk blir utÄlmodige eller forvirret dersom ingenting skjer. Hvis ventetiden overstiger 4 sekunder, bÞr brukeren se en forklaring sammen med loaderen (tekst under) som forklarer hva som skjer eller hva som ventes pÄ.
Dersom ventetiden overstiger âvanligâ eller forventet responstid kan det vĂŠre lurt Ă„ vurdere Ă„ gi ytterligere informasjon til brukeren, for eksempel ved bruk av en Alert som sier noe om hvordan innholdet ikke lastes inn.
Spinneren fungerer godt der du har liten plass, for eksempel i en button eller i et mindre felt pÄ en side. Husk at spinneren bÞr brukes bevisst, spesielt i mindre elementer der konteksten rundt hvorfor noe laster inn kan vÊre uklar.
Anatomi loader
- Animasjon
- Tekst (valgfritt)
Anatomi spinner
- Animasjon
- Tekst (valgfritt)