How To Add A Reading Progress Bar In WordPress

Want to create a Amazing Reading Progress Bar or a Reading Meter but don’t know how? Then you’ve come to the right place! There are two methods to do this. After adding this Progress bar to your website users of your website can estimate the reading time of the posts or pages.

First Method is very is all you have to do is the install this WordPress Plugin customize the settings as you want.

Reading Progressbar
Set the settings as you want and don’t forget to save the changes.

Second Method is only works GeneratePress theme. If you are using the Premium version of the GeneratePress theme you don’t have to install any plugin. So let’s see how to do it very quickly.

  1. Go to Appearance > Elements
  2. Click on Add New Element and choose Hook as the type and click on create.
  3. Add any Title and paste the below code
<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:#1FA2FF;
  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>

4. Set the setting as the following screenshots.

Progress Bar
Progress Bar

5. Now Publish it.

6. That’s it. If you want you can edit the color codes too.


Share on:

Leave a Comment