Skip to main content

ProgressBar

    Use the ProgressBar to indicate an ongoing saving or uploading process in a specific part of the page.

    OverviewPropertiesUsageChangelog

    Import​

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

    Demo​

    Indeterminate ProgressBar​

    If you don't provide numeric values for the ProgressBar, it will be indeterminate and the progress animation will loop continuously.

    Determinate ProgressBar​

    Assign numeric values to show stages of progression. By default, the numeric values are percentages. If you don't want to use percentages, you'll need to set a proper aria-valuetext following A11y guidance. The value is clamped by the min and max values. These are 0 to 100 by default, as in this example.

    Set min and max values​

    You can adjust the progress animation by setting a min value, a max value, or both. This example uses 20 as the min value and 150 as the max value.

    Add more information​

    To display more information about the progress, use ProgressBar compounds. ProgressBar.Label can be used to describe what's happening (e.g. Downloading, Uploading, Processing). ProgressBar.Icon allows you to add visual icons. ProgressBar.Value displays the progress in numerical values.

    Change density​

    The ProgressBar can also be condensed. To enhance the layout, any additional information can be shown above the ProgressBar. If there's insufficient space to display the entire label or value text, it will be truncated automatically.

    Change color scheme​

    The ProgressBar can be rendered in different colors using the color prop. Color schemes: neutral, primary, success, warning, critical.

    Accessibility​

    aria-label​

    Support usability by adding an aria-label to explain the progress that's represented. This step is particularly important if you aren't using a ProgressBar.Label within the ProgressBar compound component.

    aria-valuetext​

    If the value property of the ProgressBar is not a percentage (the default setting) you must add an aria-valuetext to explain what it conveys. Additionally, if it's unclear what meaning the value of the ProgressBar conveys, you can also add the aria-valuetext.

    Still have questions?
    Find answers in the Dynatrace Community