Skip to main content

ProgressIndicator

Shows the progress of a process in a graphical way. To indicate the progress, the inside of the component is filled with a color.

Responsive Behavior​

You can change the size of the Progress Indicator by changing its width or height CSS properties.

ES6 Module Import​

import "@ui5/webcomponents/dist/ProgressIndicator.js";

Basic Sample​

Properties​

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring
Default""
Since1.16.0

disabled​

DescriptionDefines whether component is in disabled state.
Typeboolean
Defaultfalse

hideValue​

DescriptionDefines whether the component value is shown.
Typeboolean
Defaultfalse

value​

DescriptionSpecifies the numerical value in percent for the length of the component.
Note: If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
Typenumber
Default0

displayValue​

DescriptionSpecifies the text value to be displayed in the bar.
Note:
- If there is no value provided or the value is empty, the default percentage value is shown.
- If hideValue property is true both the displayValue and value property values are not shown.
Typestring | null | undefined
Defaultnull

valueState​

DescriptionDefines the value state of the component.
Type"None" | "Success" | "Warning" | "Error" | "Information"
Default"None"

Slots​

No slots available for this component.

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

NameDescription
barUsed to style the main bar of the ui5-progress-indicator
remaining-barUsed to style the remaining bar of the ui5-progress-indicator

More Samples​

Display Value​

Use the displayValue property to define an alternative of the value, that is actually displayed.

States​

ProgressIndicator supports several semantic value states, disabled, etc.