ProgressCircle

Use the ProgressCircle to indicate an ongoing loading process in a specific part of the page.

OverviewPropertiesUsage

Import

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

Demo

Basic ProgressCircle

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

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.

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.

Add more information

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

Change size

The ProgressCircle is also available in a smaller version.

Change color scheme

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

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.