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

3.2/5 - (41 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.


Sharing Is Caring...

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

8 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

Leave a Comment

Limited Time Offer
21% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
Limited Time Offer
21% Discount on Rank math Pro
10
days
10
hours
10
minutes
10
seconds
Hurry! The Offer Will Expire In
You This Coupon Code in Checkout
Click the code to Copy