Just wanted to share the code I have used to create a clean looking progress bar. This is just a manual one and not linked to any events on the page but something I couldn’t find any existing documentation on. Just change the max-width in the html to adjust the progress %.
Add this to your page CSS:
<style>
.progressbar{
width:99%;
border:1px solid #a9a9a9;
background:#4c515d;
border-radius: 10px;
margin:0 auto;
}
.progressbar-inner{
background:repeating-linear-gradient(
-55deg,
1cae9b,
1cae9b 10px,
49beaf 10px,
49beaf 20px
);
height:6px;
border-radius: 10px 0 0 10px;
}
</style>
Then create a custom HTML block (one for desktop and a separate one for mobile) and add the following:
<div class="progressbar">
<div class="progressbar-inner" style="max-width:50%;"></div>
</div>
