Progressbar

Release dato: 26.06.2024

Sist oppdatert: 17.01.2025

En progressbar (fremdriftsindikator) gir brukeren visuell tilbakemelding på hvor langt en prosess har kommet. Den brukes til å vise fremgang i en oppgave eller handling, for eksempel under lasting, opplasting eller i en stegvis prosess.

Relaterte komponenter

Varianter

Farger (skins)

Progressbar kommer i fire ulike skins:

Skin	Beskrivelse
Dark blue	Standard
Blue	Informativ fremdrift eller nøytral verdi
Green	Fremdrift mot et positivt mål
Red	Fremdrift mot kritisk grense eller negativ verdi

Retningslinjer for bruk

Bruk progressbar når

du har to eller flere steg i en prosess
brukeren må vite hvor langt de har kommet, og hva som gjenstår
du ønsker å redusere usikkerhet eller frafall underveis

Unngå progressbar når

prosessen er ett steg, da er den overflødig
rekkefølgen i en prosess ikke er relevant
du allerede bruker en annen fremdriftsindikator

Progressbar skal være tydelig

Det er ikke påkrevd å ha etikett eller tekst, men det bør være klart hva progressbaren representerer. Dersom prosessen består av flere steg, bør teksten forklare hvor i prosessen brukeren er.

Gjør slik

Unngå

Responsivitet

Progressbar tilpasser seg tilgjengelig plass og fungerer på både store og små skjermer. Den skalerer automatisk i bredde, men du bør teste at etiketter og tekster forblir lesbare på alle skjermstørrelser.

Universell utforming

Gi skjermleseren riktig informasjon

Skjermlesere må få vite hva progressbaren viser. Bruk riktig kombinasjon av aria-label, aria-labelledby eller aria-valuetext.

Bruk aria-label hvis baren ikke har en synlig etikett
Bruk aria-labelledby hvis etiketten står utenfor komponenten
Bruk aria-valuetext hvis prosenttall alene ikke gir mening, for eksempel i stegvis fremdrift (“5 av 10”)

Hvis du bruker statusType="fraction", kan skjermleser lese “50 %”. Bruk aria-valuetext for å si “Spørsmål 5 av 10” hvis det gir mer mening.

Bruk riktig rolle

Progressbar har to ARIA-roller:

progressbar: viser fremdrift i en prosess (standard)
meter: viser en verdi innenfor et spenn (for eksempel temperatur eller poengsum)

Etiketten må være tydelig

En progressbar skal alltid ha en forklarende etikett, enten som tittel i komponenten, eller med aria-labelledby. Gjør det klart: Hva måles? Hva gjenstår?

Eksempler

Visuell tekst	Hva skjermleser bør få vite
50 %	“50 prosent fullført” (ok hvis konteksten er tydelig)
5 av 10 spørsmål	“Spørsmål 5 av 10” via `aria-valuetext`
Ikke synlig tekst	aria-label=“Du har fullført 3 av 7 steg”

Anatomi

Element	Beskrivelse
Fylt område	Viser faktisk fremgang
Tomt område	Viser gjenværende del av prosessen
Tekst	Valgfri beskrivelse av fremdrift
Etikett/label	Valgfri tittel som gir kontekst

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-progressbar");

Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.

Props og tokens

Prop	Type	Beskrivelse
`skin`	`dark-blue` `light-blue` `green` `red`	Velg farge på fremdriftslinjen
`title`	`string`	Tittelen på fremdriftslinjen
`valueMin`	`number`	Minimumsverdien for fremdriftslinjen
`valueMax`	`number`	Maksimumsverdien for fremdriftslinjen
`ariaLabel`	`string`	aria-label for fremdriftslinjen
`ariaLabelledby`	`string`	aria-labelledby for fremdriftslinjen
`ariaValueText`	`string`	aria-valuetext for fremdriftslinjen
`valueCurrent`	`number`	Nåværende verdi for fremdriftslinjen
`statusType`	`none` `percentage` `fraction`	Type statusindikator
`statusPlacement`	`left` `following` `center`	Plassering av statusindikator
`id`	`string`	id for fremdriftslinjen
`titlePosition`	`left` `center`	Plassering av tittelen
`role`	`progressbar` `meter`	Velg hva fremdriftslinjen skal brukes til
`ariaLive`	`off` `polite` `assertive`	Velg ønsket nivå av aria-live