Spinner

const Preview = () => {
  return <Spinner aria-label='Henter kaffi' />;
};

render(<Preview />)

Bruk Spinner når

• du skal indikere at systemet jobber med en oppgave som brukeren må vente på
• det er lokale handlinger, som å sende inn et skjema eller oppdatere en tabell
• du skal fortelle brukeren når lasting vil ta mer enn 1 sekund

Unngå Spinner når

• du skal vise at enkeltelementer på siden blir lastet inn (vurder Skeleton i stedet)
• en lasting tar mindre enn 1 sekund

Eksempel

Størrelser

Du kan justere størrelsen på Spinner etter hvor den skal plasseres.

const Sizes = () => {
  return (
    <>
      <Spinner aria-label='Henter kaffi' data-size='2xs' />
      <Spinner aria-label='Henter kaffi' data-size='xs' />
      <Spinner aria-label='Henter kaffi' data-size='sm' />
      <Spinner aria-label='Henter kaffi' data-size='md' />
      <Spinner aria-label='Henter kaffi' data-size='lg' />
      <Spinner aria-label='Henter kaffi' data-size='xl' />
    </>
  );
};

render(<Sizes />)

Retningslinjer

Formålet med Spinner er å gi en visuell bekreftelse på at systemet jobber, og på den måten skape trygghet for at prosessen ikke har stoppet opp. Den kan brukes for eksempel i en knapp, et felt eller et annet avgrenset område der brukeren venter på at noe skal skje, som for eksempel lagring eller oppdatering.

Tekst

I noen tilfeller gir det en bedre brukeropplevelse å vise en forklarende tekst sammen med Spinner som beskriver hvorfor brukeren må vente. En tydelig forklaring bidrar til å redusere usikkerhet og forvirring hos brukeren.

const Text = () => {
  return (
    <>
      <Spinner aria-label='Preparing' data-size='sm' />
      <Paragraph>Forbereder filen din</Paragraph>
    </>
  );
};

render(<Text />)