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-preview/core';

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 variant prop. Color schemes: neutral, primary, success, warning, critical, onAccent.

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

Props

ProgressBarProps

extends, , , ,

Name	Type	Default	Description
value?	|	'indeterminate'	The current value.
min?		0	The minimum allowed value.
max?		100	The maximum allowed value.
density?		'default'	Controls the density of the rendering.
variant?		'primary'	Controls the appearance of the progress.
'aria-valuetext'?		the value of the progress as percentage.	The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget. By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext

ProgressBar.Label

The label can be used to render any JSX above the ProgressBar. If you only use text inside the label, it will automatically apply a text-ellipsis when using the ProgressBar in condensed mode.

ProgressBarLabelProps

extends, ,

ProgressBar.Icon

The icon is rendered at the top right of the ProgressBar. It's recommended to only use icons as children, but you can provide any JSX.

ProgressBarIconProps

extends, ,

ProgressBar.Value

The value is rendered underneath the ProgressBar and can be utilized to e.g. show the amount of data already downloaded and the total amount of data.

ProgressBarValueProps

extends, ,