Scroll Progress

<div class="nuda-scroll-progress" role="progressbar"
     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
     aria-label="Reading progress">
  <div class="nuda-scroll-progress__bar"></div>
</div>

/* Scroll Progress
   Reading progress bar fixed at the top of the page.
   Customize: --progress-color, --progress-height */

.nuda-scroll-progress {
  --progress-color: #e4ff54;
  --progress-height: 3px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--progress-height);
  background: rgba(255, 255, 255, 0.06);
  z-index: 9999;
}

.nuda-scroll-progress__bar {
  height: 100%;
  background: var(--progress-color);
  width: 0%;
  border-radius: 0 2px 2px 0;
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-scroll-progress__bar {
    transition: none;
  }
}

/* Scroll Progress — Updates the bar width based on scroll position. */

(function () {
  var bar = document.querySelector('.nuda-scroll-progress__bar');
  var wrapper = document.querySelector('.nuda-scroll-progress');
  if (!bar || !wrapper) return;

  function update() {
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
    var progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
    bar.style.width = progress + '%';
    wrapper.setAttribute('aria-valuenow', String(Math.round(progress)));
  }

  window.addEventListener('scroll', update, { passive: true });
  update();
})();