Progress

@/components/ui/Progress

Vannrett linje som viser ANDEL av én helhet fullført (0–100) — fylt flate (default aksent) på et gray-alpha-200-spor.

Når brukes den

Bruk for andel av ÉN helhet fullført, f.eks. en sjekkliste eller budsjettforbruk mot en ramme.
Ikke bruk LoadBar til dette — LoadBar viser mengde i forhold til DE ANDRE RADENE, ikke andel av én helhet.
ariaLabel er PÅKREVD: si HVA det er fremdrift i (f.eks. «Kom i gang med Frivio, fremdrift»), ellers annonserer skjermlesere kun «progressbar, 75 %» uten kontekst.

Ulike andeler

Tallet står alltid ved siden av linja — den er selv kun et visuelt spor.

35 %

80 %

<Progress verdi={andelFullfort} ariaLabel="Kom i gang med Frivio, fremdrift" />

Tykkere spor

hoyde justerer sporets tykkelse — default 6px matcher de tre opprinnelige håndrullingene.

tone

Samme toner som LoadBar — bruk når «fullført» skal signalisere suksess/advarsel/feil i stedet for nøytral aksent (default).

<Progress verdi={100} tone="success" ariaLabel="Kostnadsramme, fremdrift" />

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

verdi *

number

—

0–100. Klippes til intervallet.

hoyde

number

Sporhøyde i px.

tone

'default' | 'accent' | 'success' | 'warning' | 'error'

'accent'

Samme toner som LoadBar. Default uendret (accent).

className

string

—

Ekstra klasser.

ariaLabel *

string

—

Tilgjengelig navn — HVA det er fremdrift i. Påkrevd.