Loader

<Loader progress={20}>Laster opp fil</Loader>

Bruk Loader når

Innhold eller data laster inn og brukeren må få vite at systemet jobber – for eksempel som en global loader for en hel side, for innhold i en modal, eller mellom stegene i en arbeidsflyt. Inkluder alltid en kort tekst som beskriver hva som skjer, som «Laster inn», «Behandler», «Aktiverer» eller «Lagrer», slik at brukeren forstår hvorfor det tar tid.

Eksempler

() => {
  const [progress, setProgress] = React.useState(0);
  return (
    <div style={{ width: '60%' }}>
      <Loader>Behandler</Loader>
      <Loader progress={20}>Laster opp fil</Loader>
      <Loader progress={progress}>
        <SecondaryButton
          onClick={() => setProgress(prev => (prev + 10) % 101)}
        >
          Gå videre &rarr;
        </SecondaryButton>
      </Loader>
    </div>
  );
}