Reading progress bar on posts
A thin bar at the top of single posts fills up as the visitor scrolls through the article.
<div class="snipfire-progress" aria-hidden="true"><span></span></div>
<style>
.snipfire-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100000; pointer-events: none; }
.admin-bar .snipfire-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .snipfire-progress { top: 46px; } }
.snipfire-progress span { display: block; height: 100%; width: 100%; background: #2346c9; transform-origin: 0 50%; transform: scaleX(0); }
</style>
<script>
( function () {
var bar = document.querySelector( '.snipfire-progress span' );
if ( ! bar ) {
return;
}
var update = function () {
var max = document.documentElement.scrollHeight - window.innerHeight;
bar.style.transform = 'scaleX(' + ( max > 0 ? Math.min( 1, window.scrollY / max ) : 0 ) + ')';
};
window.addEventListener( 'scroll', update, { passive: true } );
window.addEventListener( 'resize', update );
update();
} )();
</script>
Good to know
Comes with a rule: single posts only. Change the colour (#2346c9) to match your site.
Comes with a rule
It only runs on single posts. You can change the rule after installing.
In these packs
- Design touches: Small front-end touches: a reading progress bar, an announcement bar, a WhatsApp button, accessibility fixes.