Adding Manual Progress Bar


#1

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:

.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; }

Then create a custom HTML block (one for desktop and a separate one for mobile) and add the following:


#2

Do you have an example of this in action?


#3

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


#4

Hi Paul!

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

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!