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>