Inline Progress

Business Background

The Inline Progress is available for the Button element. Change the appearance of the button to indicate a status change.

How to Video

• 0:01 Introduction.
• 0:37 Learn how to add a button element.
• 1:00 We show you how to enable and configure Inline Progress option.
• 1:18 Learn how to set icons.

How to Guide

1. Click the + icon to open the list of elements.
2. Select the Button option from the list.
3. Click-and-drag the Button element to the canvas.
4. Click the Button element settings Gear icon. The Button Settings screen opens.
5. Select the Interactivity option.

6. Use the Inline progress toggle switch to enable it. By default, the option is off.

7. Click the Inline progress Gear icon. The Configure Inline progress screen opens.
8. Add the text to the Running label field. This is the text that will be shown on the button when the user clicks it.
9. Click the Set Icon button to add an icon. The Select Icon screen opens.

10. Use the Search field, if necessary, and click an icon to select it.
11. Click the Apply button.

12. Add the text to the After finish label field. This is the text that will be shown on the button when the action is finished.
13. Click the Set Icon button to add an icon. The Select Icon screen opens.
14. Use the Search field, if necessary, and click an icon to select it.
15. Click the Apply button.

16. Click the Apply button.

17. Save and Preview the project.

When the user completes the form and clicks on the button, the button changes as you have configured it, for example: