Skip to main content

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>

Do you have an example of this in action?

Dear Paul,


I was wondering if I am either missing something or if the html-code you provided seems to be incomplete. I’d love to use a progress bar you have developed here. Could you get back to me?


You are awesome!


Kind regards,


Pepijn

Hi Paul!


Thanks for sharing. It Looks like the HTML got lost in your copy paste 😦


You’ll need to wrap the code in the following tags (remove the spaces inside the square brackets) " " code ] ] / code ] "


This should help you properly display the HTML/CSS.


Looking forward to seeing it!

Hi there, could someone complete what Paul’s code is missing?


Thanks,

Laura

Reply


Terms & ConditionsCookie settings