Reading progress bar add in WordPress website without a plugin

by

good morning quotes
positive good morning quotes
beautiful good morning quotes
special good morning quotes
top good morning quotes
best good morning quotes
inspirational good morning quotes
motivational good 

Reading Progress Bar Code: Insert in footer.php before </body> tag
<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: 10px;  z-index: 1111;background: #ccc;}
.progress-bar {height: 10px;background-color:#02b88e;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>

Leave a Comment