Design

5 vues

4 min

Comment ajouter un progress bar de lecture dans Webflow ?

Apprenez à ajouter une barre de progression de lecture dans Webflow pour vos articles de blog avec un script JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une barre de progression de lecture dans Webflow pour vos articles de blog.

Exemple

Scrollez dans l'article pour voir la barre progresser

Comment créer une barre de progression de lecture dans Webflow

5 min de lecture

La barre de progression de lecture est un indicateur visuel qui montre à l'utilisateur sa progression dans la lecture d'un article. Elle se remplit au fur et à mesure du scroll.

Pour l'implémenter dans Webflow, vous avez besoin d'un Div fixe en haut de la page et d'un script JavaScript qui écoute l'événement scroll pour mettre à jour sa largeur en pourcentage.

Le calcul est simple : on divise la position de scroll actuelle par la hauteur totale scrollable du document, puis on multiplie par 100 pour obtenir un pourcentage.

Ce composant est particulièrement utile sur les articles longs de blog ou de documentation. Il réduit le taux de rebond en donnant une indication du temps de lecture restant.

Combinez-le avec un système d'ancres pour permettre à l'utilisateur de naviguer directement vers les sections qui l'intéressent.

Glissez pour simuler le scroll

Propriété CSS	Valeur	Description
position	fixed	Fixée en haut de page
top	0	Collée au bord supérieur
left	0	Commence à gauche
height	3px	Épaisseur de la barre
z-index	9999	Au-dessus de tout

1. Ajoutez un élément Div dans votre page

Créez un Div dans votre page et attribuez-lui la classe reading-progress. Réglez : position Fixed, top 0, left 0, height 3px, width 0%, z-index 9999. Choisissez votre couleur d'accent en background.

2. Ajoutez ce script dans le <body>

const bar = document.querySelector('.reading-progress');
window.addEventListener('scroll', function() {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = (scrollTop / docHeight) * 100;
  bar.style.width = progress + '%';
});

3. Publiez et testez

La barre se remplit progressivement au fur et à mesure de la lecture. Sur une page avec peu de contenu, la barre progressera rapidement : réservez ce composant aux articles longs.

bon à savoir

Pour limiter la barre de progression à la zone de l'article uniquement (et non à toute la page), remplacez document.documentElement.scrollHeight par la hauteur de votre élément article : const article = document.querySelector('.article-content'); const docHeight = article.offsetHeight - window.innerHeight;

Conclusion

La progress bar de lecture améliore l'engagement sur les contenus longs. Cas d'usage :

Articles de blog longform
Pages de documentation
Tutoriels étape par étape

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute