ProgressCircle

The ProgressCircle component is used to indicate the progress or completion status of a task or process.

Import

import { ProgressCircle } from '@dynatrace/strato-components-preview/core';

Use cases

Basic ProgressCircle

If you don't provide a value to the ProgressCircle, it is indeterminate and keeps looping the progress animation.

CodeSandbox

Determinate ProgressCircle

You can provide a value to animate the progress bar to a given position. By default, we assume that this numeric value always reflects a percentage. If it does not reflect a percentage value, a proper aria-valuetext needs to be set see A11y. The value is clamped using the min and max value. These are by default 0 to 100.

CodeSandbox

Set min and max value

You can adjust the progress animation by setting a min value, max value, or both. This example uses the same value as in the above example, except that the min and max value are set differently.

CodeSandbox

Add more information

To display more information about the progress, you can render any JSX inside the ProgressCircle.

CodeSandbox

Change the size

The ProgressCircle is also available in a smaller version.

CodeSandbox

Change the color scheme

The ProgressCircle can be rendered in different colors. You can change the color scheme using the variant prop.

CodeSandbox

Accessibility

aria-label

If there is no string set as children inside the ProgressCircle you should add an aria-label to explain what the progress represents.

aria-valuetext

If the value property of the ProgressCircle does not reflect a percentage you need to provide more meaning for the value of the ProgressCircle. In that case, you should always add an aria-valuetext. Additionally, if it is unclear what meaning the value of the ProgressCircle conveys, you can also add the aria-valuetext.

CodeSandbox

Props

ProgressCircleProps

extends, , , ,

Name	Type	Default	Description
value?	|	'indeterminate'	The current value.
min?		0	The smallest allowed value.
max?		100	The maximum allowed value.
size?		'large'	Controls the size of the rendered progress.
variant?		'primary'	Controls the appearance of the progress.
'aria-valuetext'?		the value of the progress as percentage.	The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget. Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext