How To Add A Reading Progress Bar In WordPress Without Plugin

How To Add A Reading Progress Bar In WordPress Without Plugin

Let me know if you have just made and WordPress website and you want to add a reading meter, or you can say reading progress bar in a WordPress post this video is going to help you a lot because I have shared the way to add a reading progress bar or you can say horizontal progress bar in WordPress page or post so user can estimate the reading time

Contents In The Article  hide 
1 HTML, CSS, and JavaScript Code
2 You Can Watch this video for more clarity.

HTML, CSS, and JavaScript Code

Copy and Paste this code to the element Section according to my YouTube video.

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

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

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

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

<div class="TechProAdvice-reading-meter">
  <div class="TechProAdvice-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>

I hope This Article and my video help you to create a Reading Progress Bar In WordPress Post or Reading Meter.

You Can Watch this video for more clarity.

Let me know if you are facing any issues regarding the same.

Leave a Comment