Progress bar

ProgressBar shows how far a task has come. A visible label is required, and the value prints beside it in words. bar is a 12 px sunken track filled in the selected ink; segments counts up to 12 cells, done cells in the selected ink. indeterminate prints a still, hatched track and "Working…": there is no loop.

Example#

Volume

Paper

Colourway

Upload42 %

Screens approved7 of 9 screens

Rendering the coverWorking…

Live render of examples/progress-bar/basic.tsx

Usage#

Use a progress bar to show how far a task has come: an upload, screens approved, a render. A visible label is required and the value prints beside it in words.

bar (default) is a 12 px sunken track filled in the selected ink.
segments counts up to 12 cells, for steps people count, such as screens approved.
indeterminate prints a still, hatched track and "Working…". It never loops (D-E3).

Anatomy#

Upload42 %

Screens approved7 of 9 screens

Rendering the coverWorking…

Headdata-mk-part="head"
Labeldata-mk-part="label"
Valuedata-mk-part="value"
Trackdata-mk-part="track"

Volume#

Reading layer: identical at every volume.

Quiet
Upload42 %
Screens approved7 of 9 screens
Rendering the coverWorking…
Docs, forms, legal and long reads. Flat inks, no art in motion.
Studio
Upload42 %
Screens approved7 of 9 screens
Rendering the coverWorking…
The site default. Art on its own plates, one display moment per view.
Press
Upload42 %
Screens approved7 of 9 screens
Rendering the coverWorking…
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
Upload42 %
Screens approved7 of 9 screens
Rendering the coverWorking…
Launches, posters and the 404. Every ink, and the words still win.

Content#

The label names the task: "Upload", "Screens approved".
valueText says it in the reader's terms: "7 of 9 screens", not "77.7 %".

Do and don't#

Screens approved7 of 9 screens

Counted in the task's own units.

Don't

Progress77.7 %

A precise percentage of nothing named.

People think in screens, files and steps. A labelled count tells them what is left; a bare percentage does not.

Accessibility#

role="progressbar" named by the label, with aria-valuetext in the same words the bar prints.
Nothing animates: the fill is set once per render, so reduced motion changes nothing.
Done and open cells differ by face and rule weight as well as ink.

The colour pairs it prints, with their contrast on both papers:

Text	Surface	Role	Bone	Night
`--mk-text`	`--mk-surface`	ui	not in this look	not in this look
`--mk-text-2`	`--mk-surface`	ui	not in this look	not in this look

Process at Studio, normal contrast. Every look: the press check.

Props#

Prop	Type	Default	Description
`label` required	`string`	none	Visible and the bar's name.
`value`	`number`	none
`max`	`number`	`100`	Default 100.
`valueText`	`string`	`"{n} %", or "{value} of {max}" for segments`	The words for the value (default "{n} %", or "{value} of {max}" for segments).
`appearance`	`"bar" \| "segments"`	none
`indeterminate`	`boolean`	none	No known value: a still hatched track and `indeterminateText`.
`indeterminateText`	`string`	none	Default "Working…".

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from ProgressBarProps in packages/overprint-react/src/reading/progress-bar/progress-bar.tsx.

Tokens#

System tokens (17)

Its own properties (2)

--mk-progress
--mk-progress-gap

Scanned from its CSS at build and checked against its registry entry; 7 read but not declared there.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

MinorreactBreadcrumbs, Pagination (with paginationRange), Count, ProgressBar (bar, segments, indeterminate), Avatar and AvatarGroup, Tick, EmptyState, Kbd, Skeleton and Loader. Read the whole entry