ProgressBar

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

OverviewPropertiesUsage

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.