Progress

A task with a finish line. Known progress shows a percentage; unknown work animates instead of guessing.

Determinate

40%

<Progress label="Upload" value={40} max={100} showValue />

<Progress label="Waiting for the server" />

80%

55%

30%

<Progress label="Small" value={60} size="sm" />
<Progress label="Success" value={80} tone="success" />

Prop	Type	Default	Description
`value`	`number`	-	Current value; omit for indeterminate.
`max`	`number`	`100`	Finish line.
`label`	`string`	-	Accessible name (required).
`showValue`	`boolean`	`false`	Visible percentage.
`size`	`sm \| md \| lg`	`md`	Bar height.
`tone`	`accent \| success \| warning \| danger`	`accent`	Fill color; pair with the label word, never color alone.

:root {
  --ink-progress-height: 0.5rem;
}