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

4.1/5 - (93 votes)

Let’s do you have just made and WordPress website and you want to add a reading meter, or you can say reading progress bar in WordPress post then 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 Java Script Code

Simply Copy Paste this code to the element Section according to my youtube video.

<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.

You Can Watch this video for more clarity.

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


One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
Avatar of ANAND

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

14 thoughts on “How To Add A Reading Progress Bar In WordPress Post Without Plugin”

  1. Aapne jo #more vala article / video banaya he usme aaj generate press me update aya to vo code vaha se gayab ho gaya iska kuch solution he ya har update me hame khudse he karna padega code???

    Reply
  2. Hey Sir, please make a video on the style of the previous and next buttons that appear at the end of the post below category and above share icons.

    Reply
  3. Hello Anand sir, Aapne jo ye process btaya maine implement kiya….but it works only in mobile…desktop me scroll show kr rhe h post pe…pr jb down me scroll krta hun to koi effect nhi kuch nhi pta chalta..kya kru sir iske liye..?

    Reply
  4. Hi My name is Ravi Gupta thanks for sharing this information I am so happy to watch this video I was searching a lot about this I saw in many websites or it is looking good but I was not able to put in my website because of you I got to know and now I am going to put in my website too

    Reply

Leave a Comment