add

How to Add Reading Progress Bar in Blogger - 2026 Guide

Emxymes 11:51

 

You have 160+ long posts (Post #121-162). Users leave without reading 50%. Reading progress bar top = shows 0-100% scroll = keeps user + looks pro like Medium.

In Post #163, reading progress bar.

Step 1: Add Progress Bar HTML - Top Fixed

  1. Theme → Edit HTML → Find <body> → Just below paste:
<!-- Reading Progress Bar - Post #163 -->
<div id="read-progress-wrap" style="position:fixed;top:0;left:0;width:100%;height:4px;background:rgba(0,0,0,0.05);z-index:99999;">
  <div id="read-progress-bar" style="height:100%;width:0%;background:linear-gradient(90deg,#0ea5e9,#7c3aed);transition:width 0.1s linear;"></div>
</div>

Step 2: Add JS - Calculate Scroll %

Paste before </body>:

<script>
// Reading Progress Bar - Post #163
window.addEventListener('scroll', function(){
  let winScroll = document.documentElement.scrollTop || document.body.scrollTop;
  let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let scrolled = (winScroll / height) * 100;
  document.getElementById('read-progress-bar').style.width = scrolled + "%";
  
  // Change color at 100% - completed
  if(scrolled > 99){
    document.getElementById('read-progress-bar').style.background = "#10b981";
  } else {
    document.getElementById('read-progress-bar').style.background = "linear-gradient(90deg,#0ea5e9,#7c3aed)";
  }
});
</script>

Step 3: Variants - Choose Style (3 Options)

Style Code Change
Thin top (recommended Post #163) height:4px; top:0; - like YouTube
Thick top height:6px; background:#f59e0b; - bold
Circle bottom right See advanced code below

Step 4: Advanced - Circle Progress Bottom Right (Optional)

If you want circle % like pro blogs, use this instead of top bar - or use both:

<div id="circle-progress" style="position:fixed;bottom:20px;right:20px;width:50px;height:50px;z-index:9999;display:none;">
  <svg width="50" height="50">
    <circle cx="25" cy="25" r="20" stroke="#e5e7eb" stroke-width="4" fill="none"/>
    <circle id="circle-bar" cx="25" cy="25" r="20" stroke="#0ea5e9" stroke-width="4" fill="none" stroke-dasharray="126" stroke-dashoffset="126" stroke-linecap="round" transform="rotate(-90 25 25)"/>
  </svg>
  <span id="circle-text" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;">0%</span>
</div>

<script>
window.addEventListener('scroll', function(){
  let scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
  let circle = document.getElementById('circle-bar');
  let text = document.getElementById('circle-text');
  let wrap = document.getElementById('circle-progress');
  if(window.scrollY > 300) wrap.style.display='block'; else wrap.style.display='none';
  let offset = 126 - (scrolled/100)*126;
  circle.style.strokeDashoffset = offset;
  text.innerText = Math.round(scrolled) + '%';
});
</script>

Step 5: Connect to Dark Mode + Mobile

/* Dark mode support Post #150 */
.dark #read-progress-wrap{background:rgba(255,255,255,0.1);}
.dark #read-progress-bar{filter:brightness(1.2);}

/* Mobile - hide circle on small */
@media(max-width:600px){
  #circle-progress{bottom:80px;right:10px;width:40px;height:40px;}
}

Step 6: Why Important for 163 Posts

  • Posts #121-163 are 1500-3000 words long - users need progress cue - reduces bounce 10%
  • Matches your mega menu Post #146 - top fixed bar below menu? Adjust top: if you have fixed header: top:60px; instead of top:0;
  • Zero impact - 10 lines JS, no library
  • AdSense safe - not covering ads
If you have fixed header 60px height (Post #146):
Change #read-progress-wrap top:60px; not top:0;
Else progress hidden behind header.

Post #163 Complete - progress bar live.

Next Post #164: How to Add Estimated Reading Time in Blogger.

Tags:

Post a Comment

0 Comments