Adding Progress Bars to your Course Pages
To add a progress bar to your course pages, just follow these steps:
- In the Page Builder, open the page where you'd like to add the progress bar. It makes sense to add a progress bar to the course home page and the single training page, since those are usually the two pages your students will see the most. To do that, open the blocks sidebar and hover the Advanced category. Drag the HTML/JS block onto the page.
- Next, edit the block and add the below code:
<center><h2><strong>You're {XP Perc Complete}% finished {Course Name}!</strong></h3></center>
<style>
.progress-bar {
width: 50%;
min-width: 300px;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 1px 3px #e6e6e6 inset;
display: block;
margin: auto;
margin-top:10px;
border: 1px solid #e1e1e1; /* subtle outline */
}
.progress-bar-fill {
height: 50px;
display: block;
background-color: red;
border-radius: 4px;
transition: width 0.2s ease-in-out;
background-image: repeating-linear-gradient( 45deg, #f9f9f9, #e0e0e0 10px, #189AB4 10px, #189AB4 20px ); /* darker diagonal stripes */
}
</style>
<div class="progress-bar">
<div class="progress-bar-fill" style="width:{XP Perc Complete}%;"></div>
</div>
<style>
.progress-bar {
width: 50%;
min-width: 300px;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 1px 3px #e6e6e6 inset;
display: block;
margin: auto;
margin-top:10px;
border: 1px solid #e1e1e1; /* subtle outline */
}
.progress-bar-fill {
height: 50px;
display: block;
background-color: red;
border-radius: 4px;
transition: width 0.2s ease-in-out;
background-image: repeating-linear-gradient( 45deg, #f9f9f9, #e0e0e0 10px, #189AB4 10px, #189AB4 20px ); /* darker diagonal stripes */
}
</style>
<div class="progress-bar">
<div class="progress-bar-fill" style="width:{XP Perc Complete}%;"></div>
</div>
Here's an example of what the above code looks like:
Some final notes:
- You can add this block into any position on any page you like!
- You can customize the colors of the progress bar by adjusting the hex color codes used in the code above which look like "#189AB4"
- We've relied on two "tokens" to embed data into your progress bar from the database: {XP Perc Complete} and {Course Name}
You can feed the code into Chat GPT and ask it to make changes for you as well.
