Progress
A linear indicator for determinate progress.
Overview
The MD3 linear progress indicator: a 4px full-radius track on
secondary-container with a primary active bar. Pass value (0–100); the
bar slides to each new value with the kit's 200ms strong ease-out, so stepped
updates read as motion rather than jumps. For waits of unknown length use
Spinner instead.
$ npx morpha-ui add progressExamples
Values
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add progress. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add progressAPI Reference
Prop
Type
Accessibility
- The underlying Base UI primitive exposes
role="progressbar"witharia-valuenow/aria-valuemin/aria-valuemax. - Add an
aria-label(oraria-labelledby) describing what is progressing. - The indicator moves via
transform; users who prefer reduced motion simply see the bar at its new position.