{"id":6312,"date":"2024-04-05T12:43:22","date_gmt":"2024-04-05T12:43:22","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=6312"},"modified":"2025-02-17T11:53:09","modified_gmt":"2025-02-17T11:53:09","slug":"progress-bar","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/progress-bar\/","title":{"rendered":"How to add a progress bar to an interactive experience"},"content":{"rendered":"\n

Flow Micro-theme Progress Bar<\/strong><\/h2>\n\n\n\n

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

Example:<\/strong> 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

*The flow micro-theme for a progress bar will not enable if each question is on its own page.<\/strong><\/p>\n\n\n\n

Let’s take a look at how to add a progress bar to the Flow component.<\/p>\n\n\n\n

Step 1:<\/strong> Add a flow component<\/strong> from the elements palette<\/strong> to the canvas. By default, a flow component contains 3 flow steps but additional flow steps can be added from the elements palette. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2:<\/strong> Select the flow component<\/strong> 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<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3:<\/strong> On the send dropdown, select one of the navigation styles<\/strong>. Navigation styles include numbers, dots, and progress bars.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Custom Progress Bar<\/strong><\/h2>\n\n\n\n

A custom progress bar is ideal for content that spans multiple pages<\/strong>, say you have a 5 question assessment but each question is on a separate page.<\/p>\n\n\n\n

Let\u2019s take a look at how to make a custom progress bar.<\/p>\n\n\n\n

Step 1:<\/strong> Place a responsive grid on the canvas<\/strong>. By default, a responsive grid contains 1 row and 3 columns.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2:<\/strong> Place a container in the column<\/strong>, then navigate to the right hand side design panel and scroll down to layout<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3:<\/strong> Expand the layout panel, set a height and width for the progress bar, and  necessary margin\/padding<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4:<\/strong> Other styling components<\/strong> such as border radius can be found by expanding Border & Corners<\/strong>. There is also the option to expand the Styling<\/strong> 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  <\/strong>or in the Styles Background.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 5:<\/strong> In the layout panel, set the display to inline-block and vertical alignment to middle<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 6:<\/strong> 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.<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 7:<\/strong> Add animations<\/strong> to fade in left\/right, pull in left\/right, and many others to enhance the interactivity of the progress bar. <\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":21,"featured_media":6313,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[940,22],"tags":[],"class_list":["post-6312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navigation","category-the-functionalities"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=6312"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6312\/revisions"}],"predecessor-version":[{"id":6841,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/6312\/revisions\/6841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/6313"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=6312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=6312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=6312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}