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

The ProgressCircle component accepts all the props a standard <svg> does in React (HTML, ARIA, data attributes, and event handlers). Its props are typed as React.SVGAttributes<SVGElement>. See more about supported HTML props in React's documentation.

However, ProgressCircle doesn't accept any children.

Loading API documentation...