Skip to main content

How to Use the Progress Bar in Your Quiz

Build a beautiful progress bar in your quiz to show what step the customer is it in the quiz.

Written by Ariel Santos
Updated this week

Enabling the progress bar

When you create a new quiz, the progress bar will be enabled by default. If you are editing an older quiz or if you want to re-enable the progress bar after disabling it, you can enable it by going to the Design tab in the quiz editor -> Progress Bar -> Enable progress bar:

Navigating the progress bar settings

In the progress bar settings, you will find a lot of options to customize the progress bar. Here is an overview of all of them:

Style

Here, you can select different looks for the progress bar:

They are:

Floating Pill

Gradient

Minimal

Neon Glow

Segmented

Standard

Steps/Dots

Striped

Thick Rounded

Typography

Here, you have several options that affect the text in the progress bar.

They are:

Step label and Separator

You can use something like Step 1 of 10, Page 1 of 10, or even a different language:

Font family and Font weight settings

You can change the font family and change the font weight:

You can also inherit your fonts from your website, where the quiz will be published:

Label alignment

Change the text alignment for the step label:

Label position

Choose whether you want the step label to be above or below the bar:

Font size and Text Color settings

Change the size and color of the text:

Bar colors

Change the Progress color and the Track (background) color:

Position

Adjust the position of the progress bar, if it should stick to the edges, and how much margin you want:

Page position

Choose if you want to place the progress bar on top of the content or at the bottom of the content:

Sticky to the edge of the screen

This will disregard the margin and just put it at the edge of the screen. It will be placed at the edge of the top or bottom, depending on your choice in the previous option:


Margin to content

This is how much space the progress bar will have from the quiz content:

Display

You can enable or disable the step count and/or the percentage:

Disabling or enabling the progress bar in specific pages

If you want the progress bar not to be displayed on all pages, say the first page, or an informational page, you can check Do not show a progress bar on this page in the question settings on the right:

All other pages will still show the progress bar if you have enabled it on the Design tab -> Progress bar -> Enable progress bar, but you can disable it on a per-page basis via the steps above.

Did this answer your question?