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.