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.
