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 top, left 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