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​
Download Open in Playground Edit
Properties​
accessibleName​
Description Defines the accessible ARIA name of the component. Type string
Default "" Since 1.16.0
disabled​
Description Defines whether component is in disabled state. Type boolean
Default false
hideValue​
Description Defines whether the component value is shown. Type boolean
Default false
Description Specifies 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. Type number
Default 0
displayValue​
Description Specifies 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. Type string | null | undefined
Default null
valueState​
Description Defines the value state of the component. Type "None" | "Success" | "Warning" | "Error" | "Information"
Default "None"
No slots available for this component.
No events available for this component.
Methods​
No methods available for this component.
CSS Parts​
Name Description bar Used to style the main bar of the ui5-progress-indicator
remaining-bar Used 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.
Download Open in Playground Edit
ProgressIndicator supports several semantic value states, disabled, etc.
Download Open in Playground Edit