How to Add Page Scroll Progress Bar in Blogger

Page Scroll Progress Bar is a progress bar displayed anywhere on your website that indicates how much page is scrolled.

Generally, the page scroll progress bar is located at the top of the website and it indicates how much page you have scrolled.

Today you will find page scroll progress bars on many websites. Especially on websites that are hosted on WordPress and some websites which are hosted on blogger.

Most blogger template designers add this progress bar by default in the template. But if you don't have that progress bar in your template then you can add it manually.

If you notice then you will see that I am also using the scroll progress bar indication on this website. Have a look at the top of this webpage.

This page scroll progress bar is fixed at the top of your web page.

To add this page scroll the progress bar in the blogger and follow the steps which are provided below.

Steps to add page scroll progress bar in blogger:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and add it above the tag which we have founded in step 4.

<div class="progress"></div>
<style>
    .progress {
        background: linear-gradient(to right, #fc801c var(--scroll), transparent 0);
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        z-index: 1;
        animation: background 0.5s;
    }
</style>
<script>
    var h = document.documentElement,
        b = document.body,
        st = "scrollTop",
        sh = "scrollHeight",
        progress = document.querySelector(".progress"),
        scroll;
    document.addEventListener(
        "scroll",
        function () {
            scroll = ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100;
            progress.style.setProperty("--scroll", scroll + "%");
        },
        {
            passive: true,
        }
    );
</script>

6. Save Theme/Template

After adding the page scroll progress bar functionality to your website now let me tell you something about the codes that I have provided you above.

In simple words let's break down the code I have provided you.

Code Analysis:

In the CSS code I have used position: fixed;top:0; to fix this page scroll progress bar indicator at the top of the web page.

Then I used gradients as the background color and the gradient fill amount and for that, I have to use the CSS variable called var(--scroll) because the variable will be updated automatically each time when we scroll our web page.

In the JavaScript code simply have to get the scrolled page value by scroll event using.

scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;

Then we have to set that page scroll value to CSS variable using.

progress.style.setProperty('--scroll', scroll + '%');

That's all about the page scroll progress bar indicator it seems pretty cool.

Wrap up:

If you like this page scroll progress bar indicator then you can also use it on your website.