Unbounce: How to Add a Scrolling Progress Bar

If you want to try out Unbounce yourself for free for 14 days and then get 20% off for the next 3 months after the 1-month free trial, sign up using my link:

https://unbounce.grsm.io/ivan?sid=u-progressbar-1

Community post with the code as shown in the video: https://community.unbounce.com/t/create-reading-progress-bar-on-scroll/10279

HTML Color Codes site: https://html-color-codes.info/

My Unbounce playlist so you can find every important piece you need: https://www.youtube.com/watch?v=p6JljKqlwFc&list=PLS46f4aLJ2hOdr6ZRw-9cnSXVWfa0r86i

Check out my courses!: https://www.amarketingessentials.com/all-courses

Hey all!

In this video, I show you how to add a scrolling progress bar to your Unbounce landing page.

This is a super awesome addition to your page that just shows the user where they are on the page. It’s definitely not necessary and you already have the scroll bar on the right side of the page, but this just adds a little flavor to the design and makes it look cooler.

This is very simple to set up. Simply follow these steps:

(1) Open your Unbounce landing page and paste the code from the Unbounce community page linked above in the JavaScript section of that page.

Unlike some other videos I made on Unbounce before, you don’t need any sort of element ID here – simply paste the code and that’s it for this step!

(2) The progress bar should now show up at the top of your page.

However, you might want to edit the color and the height of it.

To adjust the height number, simply delete the “8” that is there by default and replace it with the height in pixels that you want.

So if you want the height to be double of what it already looks like when you first put the code in, just double that height to “16. If you want to half it, then set it to “4” and so on.

To change the color, simply add the color code of whatever color you want instead of the one provided.

You can just head over to Google and type in “HTML color codes” and select any of the links provided there.

I used this website as an example: https://html-color-codes.info/

So you are free to use this one as well.

Simply select your color and then paste the code into this JavaScript section.

But that’s it! Save your work, publish your page, and you should have a working scroll bar!

Keep in mind that if you added the code from my previous video to this page already (the one with the “back to top” button here: https://www.youtube.com/watch?v=nA76BltV32M

This progress bar might not work correctly as they are incompatible.

But that’s it!

Like my Facebook page! https://www.facebook.com/onlinemarketingessentials

Thanks for watching, and I’ll see you in the next video!

source