<lm-progress-bar> – Fremdriftslinje / Progress bar

Om komponenten

Kanonisk navn: <lm-progress-bar>
Synonymer: progress bar, progress, fremdrift, lineær fremdrift, loading progress
Kategori: tilbakemelding
ARIA-mønster: Ikke aktuelt - Bygger på native <progress>, som allerede har korrekt fremdriftssemantikk. Det finnes derfor ikke behov for et separat APG-widgetmønster i komponenten.
Parts: progress, header, label, value-text, track, help
Native-first-vurdering: Dette er bevisst en wrapper rundt native <progress>, ikke en egen fremdriftsimplementasjon i div-er. Komponenten tilfører bare den konsistente etikett-/hjelpetekst-rammen og en felles måte å vise tekstverdi på.
Nettleserstøtte: Bruker native <progress> og bredt støttede plattform-API-er. Den visuelle stylingen er bevisst lett og basert på accent-color, slik at komponenten degraderer fint til nettleserens standardutseende.
Design-tokens: var(--space-xs, ...), var(--space-small, ...), var(--font-headline, ...), var(--font-liten, ...), var(--opacity-muted, ...), var(--color-surface-text, ...), var(--color-accent, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

En lineær fremdriftsindikator for prosesser som tar merkbar tid, bygd rundt native <progress> i stedet for en håndrullet div-basert erstatning. Komponenten samler etikett, hjelpetekst og visuell verdi i én konsekvent design-system-byggestein.

Egner seg for

Opplastinger, importjobber og andre prosesser der brukeren bør se at noe faktisk går fremover.
Situasjoner der en spinner alene blir for vag, men der du fortsatt vil holde markupen enklere enn å bygge opp etikett, progress og hjelpetekst manuelt hver gang.

Egner seg ikke for

Rent dekorative lasteplassholdere - bruk <lm-skeleton>.
Diskrete én-linjes statuser uten tall eller varighet - bruk en tekstlig melding eller <lm-inline-message>.

Bruk

<script type="module" src="/designsystem/komponenter/tilbakemelding/progress-bar/progress-bar.js"></script>

<lm-progress-bar
    label="Laster opp kvitteringer"
    value="32"
    max="80"
    help="Du kan fortsette å bruke siden mens opplastingen går.">
</lm-progress-bar>

<lm-progress-bar
    label="Forbereder eksport"
    indeterminate
    value-label="Pågår">
</lm-progress-bar>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett og tilgjengelig navn for fremdriftsindikatoren.
`value`	`number`	0	Attributt/property. Nåværende fremdriftsverdi. Ignoreres når `indeterminate` er satt.
`max`	`number`	100	Attributt/property. Øvre grense for `value`.
`help`	`string`		Attributt/property. Kort hjelpetekst eller forklaring under fremdriftslinjen.
`indeterminate`	`boolean`	false	Attributt/property. Fjerner den bestemte verdien og viser en pågående tilstand i stedet.
`value-label`	`string`		Attributt/property. Valgfri overstyring av tekstverdien som vises til høyre og brukes som `aria-valuetext`.

Parts

Part	Beskrivelse
`progress`	Den omsluttende beholderen for etikett, fremdriftslinje og hjelpetekst.
`header`	Raden som holder etiketten og verdi-teksten.
`label`	Den synlige etiketten over fremdriftslinjen.
`value-text`	Teksten som viser prosent eller en egendefinert verdi-status.
`track`	Det interne native `<progress>`-elementet.
`help`	Den valgfrie hjelpeteksten under fremdriftslinjen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-progress-bar::part(progress) {
    /* egne stiler for "Den omsluttende beholderen for etikett, fremdriftslinje og hjelpetekst." */
}

lm-progress-bar::part(header) {
    /* egne stiler for "Raden som holder etiketten og verdi-teksten." */
}

lm-progress-bar::part(label) {
    /* egne stiler for "Den synlige etiketten over fremdriftslinjen." */
}

lm-progress-bar::part(value-text) {
    /* egne stiler for "Teksten som viser prosent eller en egendefinert verdi-status." */
}

lm-progress-bar::part(track) {
    /* egne stiler for "Det interne native `<progress>`-elementet." */
}

lm-progress-bar::part(help) {
    /* egne stiler for "Den valgfrie hjelpeteksten under fremdriftslinjen." */
}

Tilgjengelighet

Det interne <progress>-elementet får tilgjengelig navn fra label eller en standard aria-label. value-label brukes som aria-valuetext, og help kobles via aria-describedby. Indeterminate tilstand representeres ved å fjerne value-attributtet fra <progress>, slik native HTML forventer.

Native <progress> gir riktig semantikk for fremdrift uten ekstra ARIA-roller.
label blir tilgjengelig navn via aria-labelledby, og help kobles til med aria-describedby.
value-label brukes også som aria-valuetext, slik at skjermleseren kan få en mer meningsfull tekst enn rå prosent hvis nødvendig.

Detaljer

Komponenten viser prosent som standard når value-label ikke er satt og tilstanden er determinate.
Når indeterminate er satt, fjernes value fra <progress> helt i tråd med native HTML sitt forventede mønster.

Referanser

Se også:

../skeleton/index.html - brukes når du vil vise layoutplassholder i stedet for faktisk fremdriftsstatus.
../inline-message/index.html - passer når statusen bør stå som tekst i dokumentflyten uten egen fremdriftsmåler.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: Ingen