Have you ever noticed that thin bar at the top of some websites that moves as you scroll website Page? That’s called a scroll progress bar — and it helps readers know how much of the page they’ve read. It’s simple, clean, and makes your blog look more professional.

How to Add a Scroll Progress Bar in Blogger


In this blogpost, i will show you how to easily add a scroll progress bar to your Blogger site in just 3 steps. No complicated code — promise!


Step 1: Add the HTML

This is the basic structure of the progress bar. You need to place this code just after your <body> tag in your Blogger Theme → Edit HTML section:

<div id="progressContainer">
  <div id="progressBar"></div>
</div>

This creates the container and the actual progress bar that will fill as you scroll.


Step 2: Add the CSS (Design and Style)

Now we’ll style the bar so it's visible and looks nice. Paste the CSS code below just before the </head> tag, or inside the <b:skin><![CDATA[ ... ]]></b:skin> area.

<style>
  #progressContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    z-index: 9999;
  }
  #progressBar {
    height: 100%;
    width: 0%;
    background: #007bff; /* You can change color */
    transition: width 0.2s ease;
  }
</style>

Tip: You can customize the color by changing #007bff to any other color code.


Step 3: Add the JavaScript (Functionality)

This little JavaScript code makes the bar move as someone scrolls down your blog. Place it before the closing </body> tag:

<script>
  window.onscroll = function () {
    const winScroll = document.documentElement.scrollTop || document.body.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById("progressBar").style.width = scrolled + "%";
  };
</script>

This script calculates how far a person has scrolled and adjusts the bar’s width accordingly.


You’re Done!

That’s it! You now have a working scroll progress bar on your Blogger site.

  • It helps improve user experience
  • It looks modern and clean
  • It’s super easy to set up

If you want to use this progress bar inside a Blogger post instead of the theme, let me know — I can help you add it with inline CSS and script too.

Happy blogging! 😊