Loader

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

1. Animasjon
2. Tekst (valgfritt)

Anatomi spinner

1. Animasjon
2. Tekst (valgfritt)