Componentsv2.189.1
Iconsv1.19.0
MCPv0.8.62
Tokensv0.34.3
ProgressCircle
Github
StorybookA circular progress indicator that visually represents the completion of a task or process.
Importing
The component can be imported via:
Usage
Loading editor
Max
The maximum value of the progress circle can be set using the max prop. By default, the maximum value is 100.
Loading editor
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.
Loading editor
If it has a label, you can also use the ariaLabelledBy prop to reference the label element.
Loading editor
API
PlumaProgressCircle extends Box
ARIA label for the progress bar
ARIA labelled by for the progress bar
Default:100
The maximum value of the progress bar
Default:0
The value of the progress bar