Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

ProgressBar

ProgressBar viser framdriften i en prosess.

StabilOppdatert 9. mai 2025
GithubEndringslogg

Egnet til:

  • Stegindikator
  • Tidkrevende prosess med en forventet varighet

Uegnet til:

  • I søknadsdialoger er FormProgress mer egnet

Eksempler

Lasting av innhold

Ved lasting av innhold kan man enten styre progresjonen helt selv eller la komponenten styre deler automatisk. Med value-propen bestemmer man progresjonen helt selv. Med duration-propen kan man legge inn et anslag i sekunder, så simulerer komponenten progresjon. Hvis det tar lenger tid enn antatt vises en indeterminate-animasjon.

Retningslinjer

Hvis du trenger en progresjonindikator til en søknad foreslår vi heller at du tar i bruk FormProgress.

Ved prosesser som består av flere steg, bør du ha med en tekst som sier noe om hvor i prosessen man er. Det gjelder både ved manuelle og automatiske prosesser.

Ved bruk av indeterminate-state bør du inkludere en forklaring, for eksempel "Dette tar lenger tid enn forventet" eller lignende.

Tilgjengelighet

Fordi ProgressBar trenger et tilgjengelig navn krever vi at man legger til enten aria-label eller aria-labelledby.

Hvis man legger inn en duration vil en skjermleser tolke komponenten som indeterminate umiddelbart, selv om tidsanslaget ikke har passert.

Props

ProgressBar

size?

  • Type:
    "large" | "medium" | "small"
  • Default:
    medium
  • Description:

    Changes height.

value?

  • Type:
    number
  • Default:
    0
  • Description:

    Current progress. If set, the simulated prop overrides value.

valueMax?

  • Type:
    number
  • Default:
    100
  • Description:

    Maximum progress.

simulated?

  • Type:
    { seconds: number; onTimeout: () => void; }
  • Description:

    Visually simulates loading. ProgressBar grows with a preset animation for set number of seconds, then shows an indeterminate animation on timeout.

aria-labelledby?

  • Type:
    string
  • Description:

    String ID of the element that labels the progress bar. Not needed if aria-label is used.

aria-label?

  • Type:
    string
  • Description:

    String value that labels the progress bar. Not needed if aria-labelledby is used.

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.

TokenFallback
--ac-progress-bar-fg--a-surface-alt-3