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.

    OverviewPropertiesUsage

    ProgressBarProps

    extends, , , , ,
    NameTypeDefaultDescription
    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.

    color?
    | | | |
    		'primary' or a container's color.

    Controls the color 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, ,
    Still have questions?
    Find answers in the Dynatrace Community