CSS Scroll-Driven Reading Progress Bar (Code Snippet)

<div class="progress-bar"></div>
<div class="content">
  <h1>Scroll Down</h1>
  <p>The blue bar at the top tracks your reading progress automatically.</p>
  <p class="placeholder-text">Keep scrolling...</p>
</div>

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  margin: 0;
  background: #f8fafc;
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 6px;
  background: #2563eb;
  width: 100%;
  transform-origin: 0 50%;
  z-index: 100;
  /* The Modern Magic: Scroll-driven animation */
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.content {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  /* Create height to enable scrolling */
  min-height: 300vh; 
}

h1 { margin-top: 0; color: #1e293b; }
p { color: #475569; line-height: 1.6; font-size: 1.1rem; }
.placeholder-text { margin-top: 50vh; color: #94a3b8; }

CSS Scroll-Driven Reading Progress Bar

Share Code Snippet