ProgressBar

ProgressBar viser fremdriften i én sammenhengende prosess — enten som pågående progresjon (for eksempel opplasting) eller som status for at prosessen er fullført eller feilet. Komponenten er rent informativ og kan ikke motta brukerinput.

Egnet til

• Prosesser med tydelig start og slutt der brukeren må vente (opplasting, behandling, synkronisering)
• Situasjoner der det er viktig å vise fremdrift for å redusere usikkerhet
• Å bekrefte at et steg er fullført eller feilet
• Tilfeller der fremdrift er viktigere enn nøyaktig tidsestimat

Uegnet til

• Prosesser som er tilnærmet umiddelbare — bruk Spinner for å indikere at noe pågår
• Prosesser med ukjent varighet der du ikke kan måle reell fremdrift — bruk Spinner. ProgressBar viser alltid en konkret prosent (0–100) og har ingen ubestemt («indeterminate») tilstand
• Å vise plassering i et flerstegsforløp — bruk Stepper
• Varsling eller tilbakemelding om en tilstand — bruk Message

Kom i gang

I active-tilstand viser ProgressBar pågående fremdrift som en prosent mellom 0 og 100.

Result

Loading...

Kode

Live Editor

<ix-progress-bar
  class="ix-progress-bar"
  value="25"
  label="Laster opp dokumenter"
  data-show-value=""
/>

Result

Loading...

Kode

Live Editor

<ProgressBar value={25} label="Laster opp dokumenter" showValue />

Eksempler

Kun visuell

Uten synlig label viser ProgressBar bare fremdriften. Bruk dette når konteksten allerede er tydelig — men gi den fortsatt et tilgjengelig navn med aria-label, ellers er baren navnløs for skjermlesere (WCAG 4.1.2).

Result

Loading...

Kode

Live Editor

<ix-progress-bar class="ix-progress-bar" value="40" aria-label="Laster opp dokumenter" />

Result

Loading...

Kode

Live Editor

<ProgressBar value={40} aria-label="Laster opp dokumenter" />

Med label og støttetekst

Label beskriver hva som skjer; støtteteksten gir utfyllende informasjon. Sett showValue for å vise prosentverdien til høyre i label-raden.

Result

Loading...

Kode

Live Editor

<ix-progress-bar
  class="ix-progress-bar"
  value="60"
  label="Laster opp dokumenter"
  data-support-text="Ikke lukk vinduet før opplastingen er ferdig."
  data-show-value=""
/>

Result

Loading...

Kode

Live Editor

<ProgressBar
  value={60}
  label="Laster opp dokumenter"
  supportText="Ikke lukk vinduet før opplastingen er ferdig."
  showValue
/>

Fullført (success)

I success er prosessen ferdig. Baren fylles helt, et suksessikon vises, og komponenten er ikke lenger en progressbar — status formidles semantisk på samme måte som i Message.

Result

Loading...

Kode

Live Editor

<ix-progress-bar
  class="ix-progress-bar"
  data-state="success"
  value="100"
  label="Dokumenter lastet opp"
  data-support-text="Alle filene ble lastet opp."
/>

Result

Loading...

Kode

Live Editor

<ProgressBar
  state="success"
  value={100}
  label="Dokumenter lastet opp"
  supportText="Alle filene ble lastet opp."
/>

Feilet (error)

I error er prosessen avbrutt. Et feilikon vises, og støtteteksten skal forklare hva som gikk galt og hva brukeren kan gjøre videre.

Result

Loading...

Kode

Live Editor

<ix-progress-bar
  class="ix-progress-bar"
  data-state="error"
  value="60"
  label="Opplasting feilet"
  data-support-text="Noe gikk galt under opplastingen. Prøv igjen."
/>

Result

Loading...

Kode

Live Editor

<ProgressBar
  state="error"
  value={60}
  label="Opplasting feilet"
  supportText="Noe gikk galt under opplastingen. Prøv igjen."
/>

info

success og error ignorerer value visuelt — baren er ferdigstilt (100 %) eller beholder fyllet fra da den feilet. Statusikonet rendres alltid i disse tilstandene og kan ikke skjules.

Props / API

HTML-attributter på <ix-progress-bar>:

Attributt	Verdi	Beskrivelse
value	0–100	Fremdrift i prosent. Verdier under 0 behandles som 0, over 100 som 100, ikke-numerisk som 0
data-state	active | success | error	Tilstand. Utelates for active (standard)
label	string	Synlig label som beskriver fremdriften. Kobles til baren via aria-labelledby
data-support-text	string	Valgfri støttetekst under baren
data-show-value	(tom)	Vis prosentverdien i label-raden. Kun relevant i active
data-value-text	string	Lokalisert skjermlesertekst for verdien (→ aria-valuetext), f.eks. «25 av 100»

React-props på <ProgressBar>:

Prop	Type	Standard	Beskrivelse
value	number		Fremdrift i prosent (0–100). Klampes av web componenten
state	'active' | 'success' | 'error'	'active'	Tilstand
label	string		Synlig label som beskriver fremdriften
supportText	string		Valgfri støttetekst under baren
showValue	boolean	false	Vis prosentverdien. Kun relevant i active
valueText	string		Lokalisert skjermlesertekst for verdien (→ aria-valuetext)
className	string		Ekstra CSS-klasser

I tillegg støttes standard HTML-attributter (id, style, aria-* osv.).

Tilpasning med CSS

Trenger du ix-progress-bar-stylingen på HTML du setter sammen selv — uten React-komponenten — kan du bruke web component-taggen <ix-progress-bar> direkte. Den genererer selv all indre struktur; du skriver kun host-elementet med attributter.

Tilgjengelige klasser og selektorer

Element	Selektor
ProgressBar-wrapper	.ix-progress-bar (eller ix-progress-bar)
Label-rad	.ix-progress-bar__header
Label	.ix-progress-bar__label
Prosentverdi	.ix-progress-bar__value
Track (ufylt del)	.ix-progress-bar__track
Fyll (fylt del)	.ix-progress-bar__fill
Støttetekst	.ix-progress-bar__support
Tilstand	[data-state="success"], [data-state="error"]

Lokale CSS-variabler

Variabel	Standard	Beskrivelse
--ii-progress-bar-height	8px	Høyden på progress-linjen
--ii-progress-bar-fill	0%	Fyllgrad. Settes inline av web componenten fra value

Eksempel: ren HTML

<ix-progress-bar
  class="ix-progress-bar"
  value="25"
  label="Laster opp dokumenter"
  data-support-text="Ikke lukk vinduet før opplastingen er ferdig."
  data-show-value
></ix-progress-bar>

Universell utforming

Hva du selv må sørge for

• Gi alltid et tilgjengelig navn — beskriv hva fremdriften gjelder («Laster opp dokumenter»), ikke bare at noe pågår («Prosessering»). Bruk label for et synlig navn, eller aria-label når baren skal stå uten synlig tekst. Uten navn er active-baren et WCAG 4.1.2-brudd (web componenten advarer i dev).
• La supportText følge overgangen til success/error — uten støttetekst blir overgangen stille for skjermlesere (kun visuell). Teksten leses opp via en live-region når den settes. I error skal den forklare hva som gikk galt og hva brukeren kan gjøre videre — farge og ikon alene forteller ikke hvorfor.
• Bruk kun én ProgressBar per prosess — ikke del opp én prosess i flere barer. Skal du vise plassering i et flerstegsforløp, bruk Stepper.
• Sett kun reell fremdrift — er varigheten ukjent, bruk Spinner i stedet for en kunstig beregnet verdi.

Hva komponenten gjør automatisk

• role="progressbar" settes i active med aria-valuenow (avrundet), aria-valuemin="0" og aria-valuemax="100". Sett valueText for en lokalisert aria-valuetext.
• iOS-tilpasning — på iOS bytter active til role="img" og baker verdien inn i aria-label («label, verdi»), fordi VoiceOver ikke leser løpende aria-valuenow-endringer på en progressbar. valueText foretrekkes i denne teksten når den er satt. Desktop og Android beholder ekte progressbar-semantikk.
• aria-labelledby / aria-describedby kobler label og støttetekst programmatisk til baren.
• Rollen fjernes i success/error — komponenten er ikke lenger en progressbar. Status formidles med data-status (kobler statusfarger), et dekorativt statusikon og tekst — aldri farge alene.
• Overgang annonseres — støtteteksten er en stabil live-region (role="status"), så endringen til success/error leses høflig uten å flytte fokus.
• prefers-reduced-motion fjerner overgangsanimasjonen for brukere som har slått av bevegelse.

Skjermleser

• active ved fokus/opplesing: "[label], [verdi], fremdriftsindikator" — rolle progressbar med aria-valuenow (eller aria-valuetext om satt)
• Verdiendring i active: skjermlesere som følger progressbar-verdien annonserer ny aria-valuenow uten å flytte fokus
• active på iOS: leses som "[label], [verdi]" (role="img" med verdien i aria-label), siden VoiceOver ikke annonserer løpende aria-valuenow på en progressbar
• Overgang til success/error: den forklarende støtteteksten legges til i en polite live-region (role="status") og leses høflig når skjermleseren er ledig
• success/error: ikke lenger en progressbar — status bæres av støtteteksten (ikonet er dekorativt og aria-hidden)

WCAG-kriterier

Sist gjennomgått: 2026-07-21 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier9 ditt ansvar · 10 håndtert · 43 ikke relevant · 0 ikke på plass

Ditt ansvar (9)

Kriterium	Nivå	Hva du må gjøre
1.3.1 Informasjon og relasjoner	A	Gi alltid et tilgjengelig navn. I active-tilstand må baren ha et tilgjengelig navn — ellers hører skjermleserbrukeren bare rollen og verdien (WCAG 4.1.2). Bruk label for et synlig navn (kobles via aria-labelledby), eller aria-label når baren skal stå uten synlig tekst. Navnet skal beskrive hva fremdriften gjelder («Laster opp dokumenter»), ikke bare at noe pågår («Prosessering»). Web componenten advarer i dev når active mangler navn. Navnet er aldri hardkodet — konsumenten sender det inn på riktig språk (bokmål, nynorsk, engelsk).
4.1.2 Navn, rolle, verdi	A	Gi alltid et tilgjengelig navn. I active-tilstand må baren ha et tilgjengelig navn — ellers hører skjermleserbrukeren bare rollen og verdien (WCAG 4.1.2). Bruk label for et synlig navn (kobles via aria-labelledby), eller aria-label når baren skal stå uten synlig tekst. Navnet skal beskrive hva fremdriften gjelder («Laster opp dokumenter»), ikke bare at noe pågår («Prosessering»). Web componenten advarer i dev når active mangler navn. Navnet er aldri hardkodet — konsumenten sender det inn på riktig språk (bokmål, nynorsk, engelsk).
2.4.6 Overskrifter og ledetekster	AA	Gi alltid et tilgjengelig navn. I active-tilstand må baren ha et tilgjengelig navn — ellers hører skjermleserbrukeren bare rollen og verdien (WCAG 4.1.2). Bruk label for et synlig navn (kobles via aria-labelledby), eller aria-label når baren skal stå uten synlig tekst. Navnet skal beskrive hva fremdriften gjelder («Laster opp dokumenter»), ikke bare at noe pågår («Prosessering»). Web componenten advarer i dev når active mangler navn. Navnet er aldri hardkodet — konsumenten sender det inn på riktig språk (bokmål, nynorsk, engelsk).
4.1.3 Statusmeldinger	AA	La støttetekst følge overgangen til success/error. Overgangen til success/error annonseres kun for skjermleser dersom støtteteksten (data-support-text / supportText) settes samtidig — teksten leses opp via en polite live-region. Uten støttetekst blir overgangen stille (kun visuell endring av ikon og farge), og skjermleserbrukeren får ikke vite at prosessen ble fullført eller feilet. Web componenten advarer i dev når success/error mangler støttetekst. I error skal teksten dessuten forklare hva som gikk galt og hva brukeren kan gjøre videre. Teksten sendes inn av konsumenten på riktig språk.
1.4.1 Bruk av farge	A	La støttetekst følge overgangen til success/error. Overgangen til success/error annonseres kun for skjermleser dersom støtteteksten (data-support-text / supportText) settes samtidig — teksten leses opp via en polite live-region. Uten støttetekst blir overgangen stille (kun visuell endring av ikon og farge), og skjermleserbrukeren får ikke vite at prosessen ble fullført eller feilet. Web componenten advarer i dev når success/error mangler støttetekst. I error skal teksten dessuten forklare hva som gikk galt og hva brukeren kan gjøre videre. Teksten sendes inn av konsumenten på riktig språk.
3.3.1 Identifikasjon av feil	A	La støttetekst følge overgangen til success/error. Overgangen til success/error annonseres kun for skjermleser dersom støtteteksten (data-support-text / supportText) settes samtidig — teksten leses opp via en polite live-region. Uten støttetekst blir overgangen stille (kun visuell endring av ikon og farge), og skjermleserbrukeren får ikke vite at prosessen ble fullført eller feilet. Web componenten advarer i dev når success/error mangler støttetekst. I error skal teksten dessuten forklare hva som gikk galt og hva brukeren kan gjøre videre. Teksten sendes inn av konsumenten på riktig språk.
1.3.1 Informasjon og relasjoner	A	Bruk kun én ProgressBar per prosess. ProgressBar representerer alltid én sammenhengende prosess. Ikke bruk flere barer for å vise deltilstander i samme prosess — det gir skjermleserbrukere flere konkurrerende progressbar-roller og et uklart bilde av samlet fremdrift. Trenger du å vise plassering i et flerstegsforløp, bruk Stepper i stedet.
4.1.2 Navn, rolle, verdi	A	Sett kun reell fremdrift som verdi. value skal reflektere faktisk fremdrift (0–100). Ikke sett en kunstig eller beregnet verdi som ikke svarer til noe brukeren venter på — det villeder både syns- og skjermleserbrukere. Er varigheten ukjent, bruk Spinner i stedet for ProgressBar. Bruk valueText for en lokalisert skjermleser-frasering («25 av 100») der ren prosent er utilstrekkelig.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Sjekk kontrast mot egen bakgrunn. Fyll og track bruker tokens som oppfyller non-text-kontrast (1.4.11) mot standard bakgrunn i både lys og mørk modus. Vises ProgressBar over en avvikende bakgrunn (farget panel, bilde), må konsumenten selv verifisere at fyll mot track og fyll mot bakgrunn fortsatt oppfyller 3:1.

Håndtert av komponenten (10)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Semantisk struktur: i active er host role="progressbar" med aria-valuenow/min/max; label kobles via aria-labelledby og støttetekst via aria-describedby. I success/error fjernes progressbar-rollen og status formidles semantisk med ikon + tekst (tilsvarende Message).
1.3.2 Meningsfull rekkefølge	A	Innhold følger naturlig leserekkefølge i DOM: label/verdi, deretter track/fyll, deretter støttetekst.
1.4.1 Bruk av farge	A	Tilstand (active/success/error) formidles med ikon + tekst i tillegg til farge — farge er aldri eneste signal. Statusikonet vises alltid i success og error.
1.4.3 Kontrast (minimum)	AA	Tekst (label, verdi, støttetekst) bruker foreground-tokens som oppfyller kontrastkravet i både lys og mørk modus.
1.4.4 Endre tekststørrelse	AA	Relative enheter (font-size-tokens) — tekst skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Mobile-first uten faste bredder (width: 100%) — reflower korrekt ned til 320px viewport uten horisontal scroll. Linjehøyden reduseres ikke på noen skjermstørrelse.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Non-text-kontrast mellom fylt del (fill) og ufylt del (neutral-subtle track) oppfyller 3:1 via tokens i både lys og mørk modus.
2.2.2 Pause, stopp, skjul	A	Overgang mellom verdier/tilstander animeres mykt, men prefers-reduced-motion: reduce fjerner transitionen helt — fyllet hopper direkte til endelig bredde/farge.
4.1.2 Navn, rolle, verdi	A	Name, Role, Value: i active eksponeres role="progressbar" med aria-valuenow (avrundet), aria-valuemin="0", aria-valuemax="100" og valgfri aria-valuetext. Tilgjengelig navn fra label via aria-labelledby (eller aria-label satt av konsumenten). På iOS byttes rollen til role="img" og verdien bakes inn i aria-label, fordi VoiceOver ikke leser løpende aria-valuenow-endringer på en progressbar; desktop og Android beholder progressbar-semantikken. I success/error fjernes rollen og value-attributtene (ikke lenger en progressbar).
4.1.3 Statusmeldinger	AA	Støtteteksten er en stabil, alltid-tilstedeværende live-region (role="status" aria-live="polite" aria-atomic="false") generert av web componenten. Overgang til success/error annonseres høflig når den forklarende teksten settes inn, uten å flytte fokus.

Ikke relevant (43)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Statusikonet er en dekorativ <ix-icon data-badge> merket aria-hidden="true" — status formidles av tekst, så ingen alt-tekst er nødvendig.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Formidler ikke instruksjoner basert på sensoriske egenskaper.
1.3.4 Visningsretning	AA	Ingen orientasjons-avhengig funksjonalitet.
1.3.5 Identifiser formål med inndata	AA	Ikke et skjemafelt som ber om personlig informasjon.
1.4.2 Styring av lyd	A	Ingen lyd.
1.4.5 Bilder av tekst	AA	Ingen bilde av tekst.
1.4.12 Tekstavstand	AA	Ingen fast tekstavstand som brytes ved brukertilpasning.
1.4.13 Innhold ved hover eller fokus	AA	Ikke hover/fokus-utløst innhold.
2.1.1 Tastatur	A	Ikke-interaktiv — ingen tastaturbetjening er nødvendig.
2.1.2 Ingen tastaturfelle	A	Ikke-interaktiv — ingen tastaturfelle.
2.1.4 Tastatursnarveier	A	Ingen hurtigtaster.
2.2.1 Justerbar hastighet	A	Komponenten har ingen tidsbegrensning.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinking — jevn overgang under terskel for anfall.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.3 Fokusrekkefølge	A	Ikke fokuserbar.
2.4.4 Formål med lenke (i kontekst)	A	Ikke en lenke.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.7 Synlig fokus	AA	Ikke-interaktiv og mottar ikke fokus.
2.4.11 Fokus ikke skjult (minimum)	AA	Ikke-interaktiv og mottar ikke fokus.
2.5.1 Pekerbevegelser	A	Ingen gestbaserte interaksjoner.
2.5.2 Avbryt peker	A	Ikke-interaktiv.
2.5.4 Bevegelsesaktivering	A	Ikke-interaktiv.
2.5.6 Samtidige inndatamekanismer	A	Ikke-interaktiv.
2.5.7 Drabevegelser	A	Ikke-interaktiv.
2.5.8 Målstørrelse (minimum)	AA	Ikke-interaktiv — ingen touch-mål.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Endrer ikke språk.
3.2.1 Ved fokus	A	Mottar ikke fokus — ingen kontekstendring.
3.2.2 Ved inndata	A	Ingen skjemainput.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.2 Ledetekster eller instruksjoner	A	Ikke et skjemafelt — ingen input-labels/instruksjoner.
3.3.3 Forslag ved feil	AA	Ikke et skjemafelt.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Ikke et skjemafelt.
3.3.7 Redundant oppføring	A	Ikke et skjemafelt.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke et skjemafelt.

Relatert

• Spinner — når varigheten er ukjent eller fremdrift ikke kan måles
• Message — for varsling og tilbakemelding om en tilstand