ProgressIndicator

<ui5-progress-indicator> | Since 1.0.0-rc.8

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

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.16.0

hideValue

Description	Defines whether the component value is shown.
Type	boolean
Default	false

value

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 | undefined
Default	undefined

valueState

Description	Defines the value state of the component.
Type	"None" | "Positive" | "Critical" | "Negative" | "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

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

CSS Custom States

No CSS custom states available for this component.

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.