ProgressCircle

Importing

import { ProgressCircle } from '@customerio/pluma-components/react';

Usage

<ProgressCircle value={50} />

Max

The maximum value of the progress circle can be set using the max prop. By default, the maximum value is 100.

<ProgressCircle value={50} max={200} />

Accessibility

To screen readers, the progress circle will announce the percentage of completion. The ariaLabel prop can be used to provide a more descriptive label.

<ProgressCircle value={50} ariaLabel="50% complete" />

If it has a label, you can also use the ariaLabelledBy prop to reference the label element.

<Label id="label">50% complete</Label>
<ProgressCircle value={50} ariaLabelledBy="label" />