How To Add A Reading Progress Bar In WordPress Without Plugin

 Do you want to Add a reading progress bar to your WordPress website, but don't want to add an additional plugin for that. Then this video is going to help you in that. 

Here, I will tell you how you can add the reading progress bar in WordPress without using plugin. You just need a small coding inside your footer.php file. 

Reading Progress Bar In WordPress

Follow the below steps to enable the reading progress indicator. 

First of all, Login to your WordPress dashboard and go to Appearance > Theme file editor

Now under the right side find the footer.php option and than find the line </body> tag. 

Paste the given code above this line and update the code. Now the reading progress bar will start show in the front-end. 

reading progress bar in wordpress without plugin
<style>
#site-navigation{margin-top:10px!important;}
.reading-meter {position: fixed;top: 0!important;z-index: 1111;width: 100%;background-color: #f1f1f1;}
.K2progress {width: 100%;height: 7px;  z-index: 1111;background: #ccc;}
.progress-bar {height: 7px;background-color:tomato;width: 0%;}
</style>
<div class="reading-meter"><div class="K2progress"><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>

If the reading progress indicator is not showing after the code placement than clear your browser cache and try opening the site in an incognito mode.

You can also use the same code in Blogger website. Although I have already posted a tutorial on Reading progress bar in Blogger.

If you don't want to add the coding and do it by plugin than you can install the read meter plugin. You can watch this video tutorial to learn more.