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
- Fylt område: Viser den faktiske fremgangen til prosessen
- Tomt område: Viser den gjenværende fremgangen som må fullføres.
- Tekst: Valgfri tekst som kan inkluderes for å gi ytterligere kontekst eller informasjon om fremdriften.
- Etikett: Valgfri etikett som kan inkluderes for å gi ytterligere kontekst eller informasjon om fremdriften.
