Skip to main content


The Progress widget indicates the progress of certain user-performed or system-triggered actions.

How to use Progress Widget


Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties allow you to edit the Progress bar widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.

Infinite loadingControl’s the widget to be in an infinite loading state, which is useful if the progress values are not determinable. This can be switched on for queries or API calls that take time to return data.
TypeThe progress bar can be of linear or circular type.
ProgressPercentage of progress to be indicated to the user.
Number of stepsProgress bar can be broken down into multiple parts called steps, each step contains a fixed percentage of progress. Number of steps can be configured to break down the progress bar for better communication. Only supports positive integers.
Show ResultControls widget’s ability to show the current evaluated percentage as in number along with the progress.
VisibleControl widget's visibility on the page. When turned off, the widget isn't visible when the app is published.

Binding properties

These properties allow you to bind your Progress bar widget with any other widget in queries or JS objects. The following table lists all the binding properties.

PropertyDescriptionCode Snippet
progressIt shows the current progress of the progress bar in percentage.{{<progress-widget_name>.progress}}
visibleVisibility of the progress bar widget.{{<progress-widget_name>.visible}}


Style properties allow you to change the look and feel of the widget.

Fill ColorControls the color of the progress bar.