How To Add A Reading Progress Bar In WordPress

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