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.
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
This is CSS and HTML that make up the progress bar:
<!--Progress Bar Styling -->
<style>
.progressBarContainer {
width: 100%;
height: 8px !important;
border: 0px;
background-color: rgba(0, 0, 0, 0.25);
}
.progressBarFill {
height: 100%;
background-color: #4eb3ab;
}
</style>
<!--Progress Bar Display. Update the width percentage to match the progress of the page -->
<div class="progressBarContainer" aria-label="Quiz progress 12 percent">
<div class="progressBarFill" style="width: 12%;"></div>
</div>
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.
Customizing Container Styles
You can edit the background color, height, border, and border radius of the container.
We recommend a neutral color or light opacity for the background, like rgba(255, 255, 255, 0.33).
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.
.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
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:
Page 1:
<div class="progressBarContainer" aria-label="Quiz progress 25 percent">
<div class="progressBarFill" style="width: 25%;"></div>
</div>
Page 2:
<div class="progressBarContainer" aria-label="Quiz progress 50 percent">
<div class="progressBarFill" style="width: 50%;"></div>
</div>
Page 3:
<div class="progressBarContainer" aria-label="Quiz progress 75 percent">
<div class="progressBarFill" style="width: 75%;"></div>
</div>
Page 4:
<div class="progressBarContainer" aria-label="Quiz progress 100 percent">
<div class="progressBarFill" style="width: 100%;"></div>
</div>
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.
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.
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)
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.
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.