UI5 Web Components
Search

Progress Indicator

v1.0.0-rc.8
@ui5/webcomponents
<ui5-progress-indicator>

Basic Progress Indicator

<ui5-progress-indicator value="0"></ui5-progress-indicator>
<ui5-progress-indicator value="25"></ui5-progress-indicator>
<ui5-progress-indicator value="75" disabled></ui5-progress-indicator>
<ui5-progress-indicator value="100"></ui5-progress-indicator>

Progress Indicator With Custom Display Value

<ui5-progress-indicator value="25" display-value="Custom Display Value"></ui5-progress-indicator>

Progress Indicator With Value State

<ui5-progress-indicator value-state="None" value="25"></ui5-progress-indicator>
<ui5-progress-indicator value-state="Error" value="50"></ui5-progress-indicator>
<ui5-progress-indicator value-state="Warning" value="75"></ui5-progress-indicator>
<ui5-progress-indicator value-state="Success" value="90"></ui5-progress-indicator>
<ui5-progress-indicator value-state="Information" value="100"></ui5-progress-indicator>

Progress Indicator With Custom Sizes

<ui5-progress-indicator value="25" style="height: 50px; width: 200px;"></ui5-progress-indicator>
<ui5-progress-indicator value="75" style="height: 50px; width: 200px;"></ui5-progress-indicator>

Overview

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";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Defines whether component is in disabled state.
displayValue
display-value
string
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.
hideValue
hide-value
boolean
false
Defines whether the component value is shown.
value
Integer
0
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.
valueState
value-state
ValueState
"None"
Defines the value state of the component.

Available options are:
  • None
  • Error
  • Warning
  • Success
  • Information
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel