Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

ProgressBar

Oppdatert 9. mai 2025Stabil
GithubYarnEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • Lasting av innhold
  • Retningslinjer
  • Tilgjengelighet
  • Props
    • ProgressBar
  • Tokens

Intro

ProgressBar viser framdriften i en prosess.

Egnet til:

  • Stegindikator
  • Tidkrevende prosess med en forventet varighet

Uegnet til:

  • I søknadsdialoger er FormProgress mer egnet

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

ProgressBar kan brukes til å vise hvor i en flyt brukeren er

Med simulated-propen kan man legge inn et anslag i sekunder, så simulerer komponenten progresjon.

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:

value?

  • Type:
    number
  • Default:
    0
  • Description:

valueMax?

  • Type:
    number
  • Default:
    100
  • Description:

simulated?

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

aria-labelledby?

  • Type:
    string
  • Description:

aria-label?

  • Type:
    string
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

TokenFallback
--ac-progress-bar-fg--a-surface-alt-3
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter

  • FormProgress thumbnail
    FormProgressNy

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack