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.
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.
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.
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
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.