Skip to main content

ProgressCircle

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

    OverviewPropertiesUsageChangelog

    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.

    Still have questions?
    Find answers in the Dynatrace Community