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. 

Share this:

Silvia is a UX/UI designer at Rock Content who has been designing for over a decade. Silvia is driven to create interactive experiences that are user-friendly, visually appealing, and functional for all. Aside from designing, she is passionate about learning and improving her logic skills. When she's not working, find her working on puzzles or spending time with family and friends.