How to add a progress bar to an interactive experience

Flow Micro-theme Progress Bar

The flow component progress bar can be added through the micro-themes when a flow component is in use. This can be used when all content is on a single page of the creative.

Example: 5 question assessment on a single page. Each question is placed in a flow step with a total of 5 flow steps in a single flow.

*The flow micro-theme for a progress bar will not enable if each question is on its own page.

Let’s take a look at how to add a progress bar to the Flow component.

Step 1: Add a flow component from the elements palette to the canvas. By default, a flow component contains 3 flow steps but additional flow steps can be added from the elements palette. 

Step 2: Select the flow component and navigate to the design panel on the right hand side where the micro-themes are located. Under the micro-themes, expand Others and select flow from the dropdown. 

Step 3: On the send dropdown, select one of the navigation styles. Navigation styles include numbers, dots, and progress bars.

Custom Progress Bar

A custom progress bar is ideal for content that spans multiple pages, say you have a 5 question assessment but each question is on a separate page.

Let’s take a look at how to make a custom progress bar.

Step 1: Place a responsive grid on the canvas. By default, a responsive grid contains 1 row and 3 columns.

Step 2: Place a container in the column, then navigate to the right hand side design panel and scroll down to layout.

Step 3: Expand the layout panel, set a height and width for the progress bar, and  necessary margin/padding. 

Step 4: Other styling components such as border radius can be found by expanding Border & Corners. There is also the option to expand the Styling under the micro-themes, for circle shape, borders, and shadows. Other components such as background color, can be added through the micro-themes Background Color  or in the Styles Background.

Step 5: In the layout panel, set the display to inline-block and vertical alignment to middle.

Step 6: Repeat steps 2-5 to create the rest of the progress bar. To align the progress bar center, select the column and navigate to the micro-themes Alignment.

Step 7: Add animations to fade in left/right, pull in left/right, and many others to enhance the interactivity of the progress bar.