Aller au contenu

Easter egg3 min lecture

Comment afficher un temps de lecture restant dynamique dans Webflow ?

Apprenez à afficher un temps de lecture restant qui se met à jour au scroll dans Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher un temps de lecture restant dynamique qui se met à jour au scroll dans Webflow.

Exemple

Scrollez la page — le compteur apparaît en bas à droite

📖
Calcul...
0%
VariableValeurDescription
WPM200Mots par minute (vitesse de lecture moyenne)
wordsCompté automatiquementNombre de mots dans .article-content
totalMinCalculéTemps total de lecture en minutes
remainingMis à jour au scrollMinutes restantes selon la progression

1. Ajoutez les éléments dans Webflow

Créez un Text Block avec l'ID reading-time-left à l'endroit où vous voulez afficher le temps restant (header d'article, sticky sidebar...). Ajoutez la classe article-content sur votre zone de contenu.

(function() {
  var content = document.querySelector('.article-content');
  var display = document.getElementById('reading-time-left');
  if (!content || !display) return;

  var words = content.innerText.trim().split(/\s+/).length;
  var WPM = 200;
  var totalMin = Math.ceil(words / WPM);

  function update() {
    var scrolled = window.scrollY;
    var docH = document.documentElement.scrollHeight - window.innerHeight;
    var pct = Math.min(1, scrolled / docH);
    var wordsRead = Math.floor(words * pct);
    var remaining = Math.ceil((words - wordsRead) / WPM);
    if (remaining <= 0) {
      display.textContent = 'Article terminé ✓';
    } else if (remaining === totalMin) {
      display.textContent = totalMin + ' min de lecture';
    } else {
      display.textContent = remaining + ' min restante' + (remaining > 1 ? 's' : '');
    }
  }

  update();
  window.addEventListener('scroll', update, { passive: true });
})();

3. Variante : barre de progression combinée

Combinez avec la barre de progression de lecture pour un indicateur visuel et textuel complet.

Conclusion

Le temps de lecture restant réduit l'abandon en donnant un objectif clair au lecteur. Cas d'usage :

  • Articles de blog longs (5 min+)
  • Guides et tutoriels techniques
  • Pages de documentation

Publié le 20 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!