Progress

The progressbar range widget indicates that a request has been received and the application is making progress toward completing the requested action.

Basic

Uploading file...

Circular

API Reference

ProgressCircle

Circular progress indicator rendered as an SVG ring. Use inside ProgressRoot for ARIA semantics, or standalone for visual-only display.

PropTypeDefaultDescription
valuenumber | null0Current progress value. Set to null for indeterminate state.
minnumber0Minimum value of the progress range.
maxnumber100Maximum value of the progress range.
sizenumber120Width and height of the SVG element in pixels.
strokeWidthnumber8Thickness of the ring stroke in pixels.
classNamestring-CSS class applied to the indicator circle. Use stroke-* utilities to change the fill color.
trackClassNamestring-CSS class applied to the background track circle.
childrenReactNode-Content rendered centered inside the ring (e.g. ProgressValue, icons).