Hopp til innhold
Aksel

Komponenter

ProgressBar

ProgressBar viser framdriften i en prosess.

StabilOppdatert 27. januar 2026
GithubEndringslogg

Egnet til:

  • Stegindikator.
  • Tidkrevende prosess med en forventet varighet.

Uegnet til:

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. Etter at duration har passert 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.

Når komponenten er i indeterminate-state bør du inkludere en forklaring, for eksempel "Dette tar lenger tid enn forventet".

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 den tilgjengelige teksten være statisk.

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.

data-color?

  • Type:
    "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
  • Description:

    Overrides inherited color. @see 🏷️ {@link AkselColor } @see 📝 Documentation

className?

  • Type:
    string

ref?

  • Type:
    Ref<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

Komponent-tokens er fjernet i versjon 8

Gammel dokumentasjon for disse finner du på JsDelivery