Scroll Progress Bar

<div class="spb-bar" id="spb-bar"></div>
<div style="height:300vh;padding:40px;">
  <h2 style="color:#e2e8f0;">Scroll down</h2>
  <p style="color:#94a3b8;">Watch the progress bar at the top</p>
</div>

body { padding: 0 !important; }
.spb-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  z-index: 999;
  transition: width 0.05s linear;
}

const bar = document.getElementById('spb-bar');
function updateProgress() {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
  bar.style.width = progress + '%';
}
window.addEventListener('scroll', updateProgress);
updateProgress();