Skip to main content

    ProgressBar

    Use the ProgressBar component to show your users that a system operation such as downloading, uploading, or processing is progressing. The ProgressBar can be used to visualize determinate or indeterminate progress.

    Import

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

    Use cases

    Indeterminate ProgressBar

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

    CodeSandbox

    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.

    CodeSandbox

    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.

    CodeSandbox

    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.

    CodeSandbox

    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.

    CodeSandbox

    Change color scheme

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

    CodeSandbox

    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.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community