Reading Progress Indicator

A lightweight reading progress bar that visually tracks how much of a page has been consumed, improving orientation and engagement on long-form content.

This experiment requires full-page rendering.

Open live demo

HTML

<div class="reading-progress">
  <span class="reading-progress-bar"></span>
</div>

CSS

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: rgba(255,255,255,0.1);
  z-index: 9999;
}

.reading-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: #1abc9c;
  transition: width 120ms linear;
}

JavaScript

const bar = document.querySelector('.reading-progress-bar');

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const docHeight =
    document.documentElement.scrollHeight - window.innerHeight;

  const progress = (scrollTop / docHeight) * 100;
  bar.style.width = `${progress}%`;
});

Tech used Vanilla JS, WordPress-ready, No dependencies
Integration level Easy (drop-in)
Performance safe Yes

What it solves

Long articles often feel endless and overwhelming. This pattern gives users a clear sense of progress, reducing cognitive load and increasing reading completion rates.

This experiment demonstrates how a reading progress indicator can enhance long-form content without interfering with layout or readability.

The indicator reacts only to scroll position and does not rely on observers or heavy calculations, making it suitable for editorial platforms, blogs and documentation-heavy websites.