How To Add A Reading Progress Bar In Blogger?

How about we do you have quite recently made a Blogger website and you need to add a reading progress bar, or you can say perusing progress bar in Blogger post then this article will help you. I have shared the method for adding a reading progress bar or you can say level horizontal bar in Blogger page or post so visitors can estimate the reading time.

HTML, CSS, and Java Script Code

Just add the given below code before closing </body> in your blogger theme section in edit HTML mode.

HTML, CSS and Javascript Code:-

<style>
#site-navigation{
  margin-top:10px!important;
}

.web-insights-reading-meter {
  position: fixed;
  top: 0!important;
  z-index: 1111;
  width: 100%;
  background-color: #f1f1f1;
}

.web-insights-progress {
  width: 100%;
  height: 10px;  z-index: 1111;
  background: #ccc;
}

.progress-bar {
  height: 10px;
  background-color:tomato;
  width: 0%;
}
</style>

<div class="web-insights-reading-meter">
  <div class="web-insights-progress">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

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

Hope This Article and my video helps you to create or Reading Progress Bar In WordPress Post or Reading Meter.

Let me know if any are facing any issues regarding this progress bar.