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 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 ui5-progress-indicator is filled with a color.

Responsive Behavior

You can change the size of the Rating Indicator by changing its width or height CSS properties.
Example: <ui5-progress-indicator style="height: 2rem; width: 6rem;"></ui5-progress-indicator> For the ui5-progress-indicator

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 ui5-progress-indicator is in disabled state.
hideValue
hide-value
boolean
false
Defines whether ui5-progress-indicator value is shown.
value
Integer
0
Specifies the numerical value in percent for the length of the ui5-progress-indicator. 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 ui5-progress-indicator.

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