ProgressCircle

Shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.

Example

Props

Value

ProgressCircles are controlled with the value prop. By default, the value prop represents the current percentage of progress, as the minimum and maxiumum values default to 0 and 100, respectively.

Min/Max

Alternatively, a different scale can be used by setting the minValue and maxValue props.

Indeterminate

By default, the ProgressCircle is determinate; when progress can be calculated against a specific goal. Use the isIndeterminate prop when progress is happening but the time or effort to completion can’t be determined.

Size

Progress circles come in 3 sizes, to fit various contexts. For example, the small progress circle can be used in place of an icon or in tight spaces, while the large variant can be used for full-page loading.

© 2025 @jossmac