Skip to main content

Progress (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Progress widget shows the progress of an operation as a bar or a ring. Use a value from 0 to 100 for known progress, such as an upload percentage. Use Infinite loading when you do not know how long the operation takes.

Widget type: WDS_PROGRESS_WIDGET

Progress widget in a Responsive app
Progress widget

Content properties​

These properties appear in the Content tab of the property pane.

Basic​

Type string​

Sets the shape of the indicator. Options: Linear (default), Circular.

You set this property in the property pane only. You cannot bind it to data.

Infinite loading boolean​

Shows progress with no known end. While on, the widget ignores Progress. Default: off.

Progress number​

Sets the progress value, from 0 to 100. Default: 50. You can bind data to it, for example {{Api1.data.percentComplete}}.

The widget cleans up the value before it shows it:

  • A value below 0 shows as 0.
  • A value above 100 shows as 100.
  • A value that is not a number shows as 0.

This property is hidden while Infinite loading is on.

Label string​

Sets a visible label for the indicator, for example Loading. Screen readers announce it as the indicator's name. If you leave it empty, screen readers announce the widget name instead.

General​

Show value boolean​

Shows the progress value as text, for example 42%. Default: off.

This property is hidden while Infinite loading is on.

Visible boolean​

Controls whether the widget is visible. Default: on.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Style properties​

These properties appear in the Style tab of the property pane.

General​

Color string​

Sets the semantic color of the indicator. Options: Accent (default), Neutral, Positive, Negative, Warning.

Values for code: accent, neutral, positive, negative, warning.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Progress1.value}}. You cannot set them directly.

value number​

The progress value.

Example:

{{Progress1.value}}

label string​

The visible label.

Example:

{{Progress1.label}}

isIndeterminate boolean​

Shows whether Infinite loading is on.

Example:

{{Progress1.isIndeterminate}}

showValue boolean​

Shows whether the value text is visible.

Example:

{{Progress1.showValue}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{Progress1.isVisible}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

Progress1.setVisibility(false)

setProgress (param: number): Promise​

Sets the progress value, from 0 to 100.

Example:

Progress1.setProgress(75)