Snippet: Reading progress bar

A thin progress bar across the top that fills as you scroll down a long page. Add to your header/footer.

<div id="readProgress" style="position:fixed;top:0;left:0;height:3px;background:#c8202d;width:0%;z-index:9999;"></div>
<script>
window.onscroll = function() {
  var h = document.documentElement;
  var scrolled = (h.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
  document.getElementById('readProgress').style.width = scrolled + '%';
};
</script>
No dependencies needed. The bar color here is set to the site's red brand color - change the background hex to whatever fits your theme.