How To Add A Reading Progress Bar In WordPress Post Without Plugin

 Let’s say you recently created a WordPress website and want to add a reading progress bar to a WordPress post. In that case, this video will be very helpful to you because I’ve shown you how to add a reading progress bar, also known as a horizontal progress bar, to a WordPress page or post so that users can estimate the length of their reading sessions.

HTML, CSS, and Java Script Code

In accordance with my YouTube video, simply copy and paste this code into the element section.

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

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

.rauf-kashmiri-progress {
  width: 100%;
  height: 7px;  z-index: 1111;
  background: #ccc;
}

.progress-bar {
  height: 7px;
  background-color:#0cbaba;
  width: 0%;
}
</style>

<div class="rauf-kashmiri-reading-meter">
  <div class="rauf-kashmiri-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 will assist you in adding a reading progress bar to a WordPress post.

For more clarification, watch the video below.