Skip to main content
🏠ComponentsProgress Circle

Progress Circle

A progress circle is a progress indicator, either determinate (indicating a percentage of progression) or indeterminate (indicating a state of loading).

The track circle of a ProgressCircle is not visible if this component contains an attribute track={false}

With track layer
Without track layer
<!-- With track layer -->
<ProgressCircle />
<!-- Without track layer -->
<ProgressCircle track={false} />

Indeterminate​

Sizes​

Progress circles are available in five sizes: xsmall, small, medium, large, xlarge.

While the default size is the medium one, the size="medium" attribute exists in case you need to reset the element to its medium size.

<ProgressCircle size="xsmall" />
<ProgressCircle size="small" />
<ProgressCircle size="medium" />
<ProgressCircle size="large" />
<ProgressCircle size="xlarge" />

Colors​

Progress circles are available in three colors: primary, neutral and white.The default color is the primary one.

<ProgressCircle color="primary" />
<ProgressCircle color="neutral" />
<ProgressCircle color="white" />

Examples​

<Button>
  <span>Click me </span>
  <ProgressCircle color="white" />
</Button>

API​

Loading API documentation...