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

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.