Comment ajouter un progress bar de lecture dans Webflow ?

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

Glissez pour simuler le scroll

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.

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