Progress
Communicate the completion of a task or a determinate value.
Linear
A horizontal determinate progress bar.
Shapes
Progress rendered in alternative bar shapes.
Rounded
Pill
Sharp
Checklist (interactive)
Progress that advances as checklist items complete.
Meter Setup Checklist
Circular (interactive)
A circular progress ring with adjustable value.
65%
LoadPeak demand
Target: 90%API reference
A progress bar: the root auto-renders a Track containing an Indicator, with optional Label and Value.
Full props on Base UI ProgressAnatomy
Progress | Root holding the value; auto-renders the track and indicator. |
ProgressTrack | The rounded bar background containing the indicator. |
ProgressIndicator | The filled bar, sized to the current value. |
ProgressLabel | Text label naming the progress bar. |
ProgressValue | Right-aligned text showing the formatted value. |