Scroll Progress Bar

<div class="fx-0735-root" role="progressbar" aria-label="Progression de lecture" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
  <div class="rpb-bar"></div>
</div>

.fx-0735-root,
.fx-0735-root *,
.fx-0735-root *::before,
.fx-0735-root *::after {
  box-sizing: border-box
}

/* Par défaut : barre fixée en haut de la fenêtre, elle suit le défilement de la page. */
.fx-0735-root {
  --rpb-height: 4px;
  --rpb-track: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--rpb-height);
  background: var(--rpb-track);
  pointer-events: none;
}

/* Avec data-rpb-target : placez la racine en premier enfant du conteneur qui défile,
   elle reste collée en haut de ce conteneur sans pousser son contenu. */
.fx-0735-root[data-rpb-target] {
  position: sticky;
  margin-bottom: calc(-1 * var(--rpb-height));
}

.rpb-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
  transition: transform 0.1s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .rpb-bar {
    transition: none
  }
}

(function () {
  // Une instance par racine. Sans data-rpb-target : la page. Avec : le conteneur désigné (sélecteur CSS).
  function run() {
  document.querySelectorAll('.fx-0735-root').forEach(function (root) {
    if (root.fx0735) return;
    var bar = root.querySelector('.rpb-bar');
    var sel = root.getAttribute('data-rpb-target');
    var box = sel ? document.querySelector(sel) : null;
    if (!bar || (sel && !box)) return;
    var queued = false;

    function update() {
      queued = false;
      var el = box || document.scrollingElement || document.documentElement;
      var max = el.scrollHeight - el.clientHeight;
      var p = max > 0 ? Math.min(1, Math.max(0, el.scrollTop / max)) : 0;
      bar.style.transform = 'scaleX(' + p + ')';
      root.setAttribute('aria-valuenow', Math.round(p * 100));
    }
    function schedule() {
      if (!queued) { queued = true; requestAnimationFrame(update); }
    }

    (box || window).addEventListener('scroll', schedule, { passive: true });
    window.addEventListener('resize', schedule);
    // Le contenu change de hauteur (images, texte chargé) : on recalcule.
    if ('ResizeObserver' in window) {
      var ro = new ResizeObserver(schedule);
      ro.observe(box || document.body);
      if (box) Array.prototype.forEach.call(box.children, function (c) { ro.observe(c); });
    }
    root.fx0735 = { update: update };
    update();
  });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run); else run();
})();