Progress

Kildekode på GitHub · Les som Markdown

Progress viser hvor langt en prosess har kommet. Bygget på Radix UI Progress med riktig role="progressbar" og ARIA-attributter.

Importering

import { Progress } from "@kilden/designsystem";

Grunnleggende bruk

<div style={{ maxWidth: "24rem" }}>
<Progress value={60} aria-label="Fremdrift" />
</div>

Ulike verdier

<div style={{ display: "grid", gap: "1rem", maxWidth: "24rem" }}>
<div>
  <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>0%</p>
  <Progress value={0} aria-label="0 prosent" />
</div>
<div>
  <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>25%</p>
  <Progress value={25} aria-label="25 prosent" />
</div>
<div>
  <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>50%</p>
  <Progress value={50} aria-label="50 prosent" />
</div>
<div>
  <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>75%</p>
  <Progress value={75} aria-label="75 prosent" />
</div>
<div>
  <p style={{ fontSize: "0.875rem", marginBottom: "0.25rem" }}>100%</p>
  <Progress value={100} aria-label="100 prosent" />
</div>
</div>

Med label

<FormField style={{ maxWidth: "24rem" }}>
<div style={{ display: "flex", justifyContent: "space-between" }}>
  <Label>Opplasting</Label>
  <span style={{ fontSize: "0.875rem", opacity: 0.7 }}>73%</span>
</div>
<Progress value={73} aria-label="Opplasting" />
</FormField>

Bruksanbefalinger

Bruk for bestemte prosesser

Progress passer for prosesser der du kjenner fremdriften — opplasting, nedlasting, flersteg-skjemaer.

Ikke bruk for ubestemt lasting

For lasting der du ikke vet hvor lang tid det tar, bruk Skeleton eller en spinner i stedet.

Tilgjengelighet

Bruker role="progressbar" automatisk
aria-valuenow, aria-valuemin og aria-valuemax settes automatisk
Legg til aria-label eller koble til en label med aria-labelledby

Props

Prop	Type	Default	Beskrivelse
`value`	`number`	`0`	Nåværende verdi (0–100)
`max`	`number`	`100`	Maksimumsverdi
`getValueLabel`	`(value: number, max: number) => string`	—	Tilpasset label for skjermlesere