Progress

Linear progress bar showing completion from 0 to 100. Pass value={null} when the amount of work is unknown: a short bar slides across the track on a loop, and under reduced motion it holds still in the middle. Built on Base UI Progress for accessible semantics.

Uploading swatches

64%

Usage

import { Progress, ProgressCircle } from "@instruments/materia-ui/components/progress";

Best practices

Use Progress for determinate 0–100 completion and value={null} when the total is unknown; position in a stepped flow is ProgressDots.
For a ring instead of a bar use ProgressCircle - it needs an explicit label for its native <progress> accessible name.
Mount ReducedMotionProvider at the app root - the indeterminate bar slides via m.* (LazyMotion).

Props

Prop	Type	Default	Description
children	`React.ReactNode`		Optional content rendered centred over the ring (e.g. a percentage).
className	`string`
indicatorClassName	`string`
label(required)	`string`		Accessible label announced by screen readers (required).
max	`number`	`100`	Value that maps to a full ring.
size	`number`	`44`	Ring diameter in pixels.
strokeWidth	`number`	`3`	Ring stroke width in pixels.
trackClassName	`string`
value(required)	`number`		Current progress; clamped to `0..max`.
valueFormatter	`(value: number, max: number) => string`	`rounded percentage of max`	Formats the ring's hover title text.

Also exports

componentProgress

Composition

Builds on

Center

Used by

FileUploadDropzone