Progressbar

Status

Figma Publisert
CSS Publisert
Vue Publisert
React Publisert
Dokumentasjon Publisert

Om komponenten

En progressbar (fremdriftsindikator) er en visuell indikator som representerer fremgangen til en pågående prosess. Den brukes til å gi brukere visuell tilbakemelding om hvor langt i flyten de har kommet i en bestemt oppgave eller handling.

Progressbar kan også ha aria-role=meter og kan da brukes til å visualisere en verdi innenfor et gitt spenn der dette ikke er et mål på fremdrift.

Varianter

Progressbar-komponenten har en standard variant, men den kan tilpasses med forskjellige fargekoder og stiler. Komponenten kommer i fire fargevarianter.

Farger

De ulike fargene som brukes er:

  • Mørk blå: surface-strong-dark-blue (#2A2859)
  • Blå: surface-strong-blue (#6FE9FF)
  • Grønn: surface-strong-green (#43F8B6)
  • Rød: surface-strong-red (#FF8274)

Alle bruker dark-blue-1000 (#2A2859), text-body-default som tekstfarge.

Slik bruker du komponenten

Det er ikke påkrevd å ha med verken etikett eller tekst som indikerer fremdrift, men det burde være tydelig for brukeren hva progressbar representerer. Når prosessen består av flere steg, bør teksten si noe om hvor i prosessen man er.

Gjør slik/ikke gjør slik

Bruk korte og konsise tekster

Ikke bruk skråstrek for å indikere steg

Anatomi

  1. Fylt område: Viser den faktiske fremgangen til prosessen
  2. Tomt område: Viser den gjenværende fremgangen som må fullføres.
  3. Tekst: Valgfri tekst som kan inkluderes for å gi ytterligere kontekst eller informasjon om fremdriften.
  4. Etikett: Valgfri etikett som kan inkluderes for å gi ytterligere kontekst eller informasjon om fremdriften.