Reading Progress Bar
Shows a thin bar at the top of the window that fills up as the visitor scrolls through the page.
Opens WPIDE on
Code
<div id="wpide-progress" aria-hidden="true"></div>
<style>
#wpide-progress{position:fixed;top:0;left:0;height:3px;width:0;background:#2271b1;z-index:100000;transition:width .1s linear;}
.admin-bar #wpide-progress{top:32px;}
@media screen and (max-width:782px){.admin-bar #wpide-progress{top:46px;}}
</style>
<script>
(function () {
var bar = document.getElementById('wpide-progress');
if (!bar) { return; }
var update = function () {
var doc = document.documentElement;
var max = doc.scrollHeight - doc.clientHeight;
bar.style.width = (max > 0 ? (doc.scrollTop / max) * 100 : 0) + '%';
};
window.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
})();
</script>Notes
Change #2271b1 to your brand color. Add conditional logic to show it only on posts.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.