Les gestionnaires de défilement JavaScript s'exécutent sur le thread principal et passent leur vie à être limités. Les animations CSS pilotées par défilement s'exécutent dans le compositeur : la progression de l'animation EST la position de défilement, donc une barre de lecture coûte deux propriétés et zéro écouteur.

.reading-bar {
  position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--brand);
  transform-origin: 0 50%; transform: scaleX(0);
  animation: reading linear;
  animation-timeline: scroll(root block);
}
@keyframes reading { to { transform: scaleX(1); } }

Où ça va, là où ça ne va pas

  • Texte d'article qui fait défiler un document : ajustement parfait, la barre reflète exactement ce que voit le lecteur.
  • Tableaux de bord multicolonnes ou conteneurs à défilement à l'intérieur des pages : étendez la chronologie au conteneur, pas à la racine, sinon elle se trouve.
  • Le support est l’ère Chromium-and-Safari ; les navigateurs sans cela ne dessinent aucune barre. Une page moins une barre ne perd rien.

Prenez la couleur de la marque et le mouvement de rien d’autre. Une barre qui suit le défilement silencieusement est une fonctionnalité ; une barre qui apparaît et disparaît à 60 Hz est une démo. Le LCP mesuré sur ce site est resté identique sans rien ajouter du tout, ce qui constitue la demande de fonctionnalité honnête derrière la plupart des barres de progression.