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.

Har du noen innspill til komponenten?Gi oss beskjed!

Fremdrift

40%

Tittel

Nåværende verdi Må fylles ut

Utseende

Mørk modus

Relaterte komponenter

Loader

Når du vil vise at en prosess pågår, men ikke har en tydelig fremdrift

Stepper

Når du vil vise en serie steg og hvor langt brukeren har kommet

Alert

Når du vil gi en status, f.eks. om fremdriften er fullført eller feiler

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”

ARIA progressbar

Beskriver hvordan du gjør fremdriftsindikatorer tilgjengelige

Accessible Progress Indicators (NN/g)

Beste praksis for fremdriftsindikatorer

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?

import @oslokommune/punkt-elements/dist/pkt-progressbar.js;

import { PktProgressbar } from '@oslokommune/punkt-react';

<script src="https://punkt-cdn.oslo.kommune.no/19/elements/pkt-progressbar.js" type="module"></script>

Testing

Elements: 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");

Egenskaper

Props

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