Adding a Stylish Reading Progress Bar to Any Site

Ever wondered how the reading progress bars on this site work, or you want to add it to your site.

It's simple, effective, and give readers a visual indicator of how much content they’ve consumed, and how much is left.

Today, I’ll walk you through adding one to your site in just a few easy steps.

What’s a Reading Progress Bar?

A reading progress bar is a thin bar at the top of the page that fills up as the user scrolls down. It’s great for long-form content because it gives readers a sense of progress and subtly encourages them to keep reading.

Let’s jump right in!

Step 1: Add the HTML

To begin, paste this code snippet anywhere in your HTML file, preferably right before the closing <body> tag:

<div class="sdp-reading-meter">
  <div class="sdp-reading-progress">
    <div class="sdp-progress-bar" id="sdpBar"></div>
  </div>
</div>

This creates the structure for the reading meter and the progress bar.

Step 2: Add the JavaScript

Next, add the following JavaScript code to make the bar dynamic. Place this inside <script> tags, either within the <head> section or just before the closing <body> tag:

function updateProgressBar() {
  const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
  const scrollPercentage = (scrollPosition / totalHeight) * 100;
  document.getElementById('sdpBar').style.width = scrollPercentage + '%';
}

window.addEventListener('scroll', updateProgressBar);
window.addEventListener('load', updateProgressBar);

This code calculates the user’s scroll position and adjusts the width of the progress bar accordingly.

Step 3: Style It Up

Finally, let’s add some CSS magic to make it look awesome. Paste this inside a <style> tag in your <head> section or link it to an external stylesheet:

.sdp-reading-meter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 999;
  background: rgb(0 0 0 / 0.05);
}

.sdp-reading-progress {
  width: 100%;
  height: 100%;
}

.sdp-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #2dd4bf, #14b8a6);
  transition: width 0.1s ease-out;
  box-shadow: 0 2px 4px rgb(45 212 191 / 0.3);
}

@media (prefers-color-scheme: dark) {
  .sdp-reading-meter {
    background: rgb(255 255 255 / 0.05);
  }
}

This gives the progress bar a sleek gradient design that works for both light and dark modes.

Step 4: Save and Test

Save your changes and open your site in a browser. Scroll down the page, and you should see the progress bar in action.

You Might want to Minify these codes, you are free to customize the style also.

Simple Add for blogger sites

On blogger, you can paste the below code before </body> tag or </body> .

<b:if cond='data:view.isPost'>
<!--Reading progress bar--><div class="sdp-reading-meter"><div class="sdp-reading-progress"><div class="sdp-progress-bar" id="sdpBar"></div></div></div <script>function updateProgressBar(){const totalHeight=document.documentElement.scrollHeight-window.innerHeight;const scrollPosition=window.pageYOffset||document.documentElement.scrollTop;const scrollPercentage=(scrollPosition/totalHeight)*100;document.getElementById('sdpBar').style.width=scrollPercentage+'%'}
window.addEventListener('scroll',updateProgressBar);window.addEventListener('load',updateProgressBar);</script>
<style>.sdp-reading-meter{position:fixed;top:0;left:0;right:0;height:4px;z-index:999;background:rgb(0 0 0 / .05)}.sdp-reading-progress{width:100%;height:100%}.sdp-progress-bar{width:0%;height:100%;background:linear-gradient(to right,#2dd4bf,#14b8a6);transition:width 0.1s ease-out;box-shadow:0 2px 4px rgb(45 212 191 / .3)}@media (prefers-color-scheme:dark){.sdp-reading-meter{background:rgb(255 255 255 / .05)}}</style>
</b:if>

The code shows a reading progress bar only in your posts. It won't show on homepage or on Pages. If you don't want that, remove <b:if cond='data:view.isPost'> and </b:if>

Why Use a Reading Progress Bar?

Improved UX: Keeps readers engaged and aware of their progress.
Stylish Design: Adds a modern touch to your site.
Lightweight: The code is clean and fast.

That’s it! You’ve successfully added a reading progress bar to your site. Feel free to tweak the colors and animations to match your theme.

happy coding!