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
