How to Add Progress Bars to your Quizzes and Forms

What You'll Learn

How progress bars are structured using HTML and CSS
Where to place progress bar styles so they apply across your campaign
How to customize the look and feel of your progress bar

You can create a progress bar with some simple HTML and CSS. Quizzes built through our Quiz Builder or when started through certain themes will have HTML progress bars included, but they may need to be turned on and edited for your needs. You can change the color, size, shape and percentage of progress bars in a few short steps.

Sample progress bar in action

Where Progress Bar Code Lives

The Main Page of your quiz should contain the CSS styles that control the look and feel of the progress bar across every page. Styles are typically placed inside the HTML1 element on the Main Page. Any CSS added there will automatically apply to quiz pages.

The HTML to display the progress bar are also typically placed inside HTML1 of each page.

Progress bar code is already included in quizzes created through our Quiz Builder by default, but the HTML element must be turned on in order to enable and edit them. To turn on the element, go to the HTML tab in the left editor column and toggle the Eye visibility icon for HTML1. If the progress bar is already visible (i.e. you started from a quiz theme), you can simply click on the progress bar in the editor, it will open the HTML block that contains it.

Styles added to the Main Page will effect subsequent pages. Do not include progress bar <style> tags on additional pages to avoid overwriting your source of truth on the Main Page. If your Main Page is a splash page where a progress bar is not needed, you'll still include the <style> code in HTML1 without adding the div html that displays the bar.

Understanding the Code

Example progress bar

This is CSS and HTML that make up the progress bar:

There are 2 divs that make up a progress bar:

progressBarContainer This div is the background of the progress bar and represents 100% of the width.

progressBarFill This is the fill bar which represents your progress so far.

Inside the <style> tags are where you will edit the look of your progress bar (found on Main Page only).

Editing a Progress Bar

The Main Page of your quiz campaign should contain the styles that control the look and feel of the progress bar across every page. That's where you can edit the styles of the bar.

Progress bar styling is located on the Main PAge

Customizing Container Styles

You can edit the background color, height, border, and border radius of the container.

Progress bars can be customized as needed We recommend a neutral color or light opacity for the background, like rgba(255, 255, 255, 0.33).

Progress bars can use rounded edges Setting the border radius to 0 gives it square edges, as where higher numbers make it rounded. In this example, the Container and Fill are using a border-radius of 20px.

Customizing Fill Bar Styles

You can edit the background color and border radius of the fill color. You can even get fancy and add gradients.

Progress bars support gradients

.progressBarFill { height: 100%; background: rgb(58,177,205); background: linear-gradient(198deg, rgba(58,177,205,1) 0%, rgba(44,192,175,1) 46%, rgba(153,200,240,1) 100%); border-radius: 20px; }

Editing Percentages

Edit individual page's progress bars via the HTML snippet

Percentages are calculated manually. So you have to enter the percentage you want to show on each page. In order to do that, you have to change the percentage shown on the div on each page. Make sure to also update the aria-label text to match the percentage. This will keep your progress bar ADA compliant for screen readers.

If you have 4 questions, you might do something like this:

A progress bar at 25% Page 1:

A progress bar at 50% Page 2:

A progress bar at 75% Page 3:

A progress bar at 100% Page 4:

Full Width Progress Bars

If you're using Edge to Edge settings, you may want your progress bar to be 100% width of your window.

A progress bar that doesn't go the full width of the page

By default, with Edge to Edge settings, the content in the editor will be centered, but the campaign background will stretch to full 100% of your view window. That means your progress bar will also be centered.

You can however use a Wrapper CSS trick to force the progress bar to stretch to the width of your window.

Use css to set the progress bar to be the full page width

While in the HTML1 editor, toggle on Wrapper CSS and add this code into the CSS Property and Value(s):

left : 0

width : 100%

top : 0 (if you want your progress bar to stay at the top)

Add css to the Wrapper CSS for the progress bar's html element

The positioning and width will override the base code and allow the HTML wrapper to be full width. You will have to edit the Wrapper CSS on each HTML block you’re using per page Extra Page you're a progress bar on to be consistent.

Image Progress Bars

Another option for progress bars, is to use images. You can design them ahead of time and upload the images you want to use for each step.

A sample progress bar You could represent that with visuals like dots indicating what section you're on, or even a character that moves across the screen as you progress.