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 Name
Type
Default
Description
errorboolean

Sets state to error.

percentnumber

Sets the fill length from 0 to 100.

sizexSmall | small | medium | largemedium

Size of the component.

Props ending with * are required

Beta