Spinner

Pakke: ds-status

Spinner brukes som en visuell animert indikasjon på at noe laster. Komponenten brukes alene eller med en forklarende kort tekst som forteller brukeren at systemet jobber.

Eksempler

Eksempler på spinnere i ulike farger

Egnet til:

  • tilfeller der det normalt tar fra ett til ti sekunder for å laste et innhold

Uegnet til:

  • lasting som tar mindre enn ett sekund
  • situasjoner der brukeren må vente i lang tid
  • å bruke flere om gangen

Teknisk dokumentasjon

Se Spinner i Storybook for tekniske detaljer

Varianter

Spinner har tre størrelser og kommer i tre farger. I tillegg har den også mulighet for tekst som informerer brukeren om at systemet jobber eller om hva som lastes. 

Interaktiv

Spinneren kan ha blå farge (interaktiv). Eksempelet viser liten størrelse.

 

Svart

Spinneren kan ha  svart farge. Eksempelet viser medium størrelse.

Mørk modus

Spinneren kan ha hvit farge. Eksempelet viser spinner med forklarende tekst under.

Spinner med forklarende tekst

Forklarende tekst kan ligge under spinneren for lengre tekst, eller ved siden av for kort tekst. 

Hvordan bruke komponenten  

  • Bruk bare en spinner om gangen.
  • Forklar ut fra kontekst hvorfor brukeren må vente.
  • Ikke bruk spinner dersom det bare er et hundredels sekund venting.

Plassering av spinneren

Plasser spinneren i nærhet til brukerens siste interaksjon. 


Når en større seksjon laster, kan spinneren vises under.

Universell utforming  

  • Bruk bare spinner når du har en handling eller oppgave med innlasting.
  • Spinneren skal ha et tekstalternativ for skjermlesere.