Progress Bar

Check out the function of the Progress Bar element!

It is mostly used to show the completion status of a transaction or flow in the form of a horizontal bar. Shows the status of a single resource in percentile.

Adding Progress Bar

You can add the Progress Bar element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a Column you just add the Progress Bar element.

The Progress Bar element is supported in both mobile and web applications.

You can use the status of a flow to show the overall status as a percentage of actions such as end-user profile verification. The Progress Bar can display a numerical value as a percentage next to it. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.


You can add a static value to the Percent field, or you can dynamically bring a state, Input element content or a value of an action result via Symbol Picker.


You can use the authorization options for the Progress Bar element.


You can manage the visibility of the element. It is always visible, hidden, or you can make it appear or hide depending on a condition.

You can add actions that you can add to the Progress Bar element with Add Actions.

You can make additional edits by adding a layout, text, fill, border, or shadow to the Progress Bar Element.

You can make visual adjustments such as environmental interior spaces and sizing.

You can set the properties such as font color and size of the Progress Bar element with the Text section.

You can add colors or images to the Progress Bar body.

You can add lines to the Outer edges of the Progress Bar and give corner bevels.

You can add a shadow effect to the Progress Bar element.

Last updated