Progress Circle

Progress Indicator Design Guidelines.

Determinant

Determinant Progress represents a known amount of time or completeness for a task. A percent prop needs to be passed to render a determinate progress.

50%

Edit the code below to see your changes live!

Indeterminant

Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render an indeterminant progress when missing a percent prop.

Edit the code below to see your changes live!

API

ProgressCircle

Prop NameTypeDefaultDescription
errorbooleanSets state to error.
percentnumberSets the fill length from 0 to 100.
sizexSmall | small | medium | largemediumSize of the component.

Props ending with * are required

Beta