Créer une barre de progression de lecture

Que vous ayez un blog ou des contenus à lire, proposer une barre de progression de lecture est véritablement nécessaire pour le confort de vos utilisateurs. Cet article va vous apprendre comment faire !

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.

 

1ère étape

Le code HTML pour placer la barre de progression.

<div class="progress_bar"></div>

Une simple classe suffit dans le HTML. Pour ce qui est du contenu, vous pouvez utiliser lipsum.com pour trouver du faux texte.

 

2ème étape

Stylisons maintenant la barre de progression.

.progress_bar {
  height: 10px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

Ici, nous plaçons la barre de progression en position fixed pour qu'elle reste toujours en haut de l'écran.

En précisant topleft et right, on demande à ce qu'elle occupe toute la largeur.

 

3ème étape

Notre barre de progression est placée, elle a été stylisée, occupons-nous donc du JavaScript.

const progressBar = document.querySelector('.progress_bar');
progressBar.style.display = "none";

window.addEventListener('scroll', handleScroll);

function handleScroll() {
  progressBar.style.display = "block";
  const height = document.body.scrollHeight; // taille du site
  const windowHeight = window.innerHeight; // taille de l'affichage
  const position = window.pageYOffset; // la position en pixels du document
  
  const trackLength = height - windowHeight; // taille du site - la partie affichée sur l'écran en ce moment (exemple : 1000px)
  
  const percentage = 
        Math.floor((position / trackLength) * 100); // pourcentage du site déjà parcouru
  
  progressBar
      .style.right = 100 - percentage + '%';
}

Grâce à addEventListener, on éxecute la fonction handleScroll à chaque mouvement du scroll sur le navigateur (avec l'objet window).

On calcul ensuite la différence entre la hauteur du document (height) et la hauteur de l'écran de l'utilisateur (windowHeight), pour détecter le pourcentage affiché.

On décale ensuite la barre de progression de x% selon le contenu qu'il reste à afficher.

Si vous souhaitez disposer d'une barre de progression de lecture avancée, avec l'affichage du pourcentage restant à lire, vous pouvez retrouver une démonstration avec le code source associé ici  : voir la version améliorée

Partagez cet article