Ressources pour développeur web

Théme de la semaine : Wordpress

Scroll progress bar avec pourcentage : Le code complet

Temps de lecture estimé : 9 minutes
Accueil → CSS3 → Scroll progress bar avec pourcentage : Le code complet

Vous avez déjà vu cette petite barre fine, tout en haut d’un article, qui se remplit au fur et à mesure que vous scrollez la page ? C’est elle qui montre votre progression de lecture. C’est discret… mais redoutablement efficace. Elle rassure l’utilisateur, améliore l’expérience et donne un petit côté “pro” à votre site. Dans ce tutoriel, vous allez apprendre à coder votre propre Scroll progress bar avec pourcentage

  • Calculer précisément la progression de défilement pour afficher un pourcentage dynamique en haut de page.
  • Coder une Scroll progress bar moderne, fluide et esthétique en combinant HTML, CSS et JavaScript sans plugin.
  • Améliorer l’expérience utilisateur de vos articles en ajoutant un indicateur visuel engageant qui renforce la perception de qualité de votre site.

Pas besoin de framework. Pas besoin de plugin. Juste du HTML, du CSS et un peu de JavaScript, pour coder un Scroll Progress Bar. Tout le code est expliqué étape par étape… c’est parti.

Visualiser la Démo du Scroll Progress Bar

Pourquoi ajouter une Scroll progress bar ?

Avant d’écrire la moindre ligne de code, comprenons ce que nous faisons.

Une Scroll progress bar est une barre de progression qui indique le pourcentage de défilement d’une page. Elle se place généralement en haut de l’écran, en position fixe, et évolue en temps réel lorsque l’utilisateur fait défiler le contenu.

Schéma d'une Scroll Progress Bar en HTML, CSS et JS

Elle présente plusieurs avantages :

  • Elle améliore l’expérience utilisateur.
  • Elle donne une indication claire de la longueur d’un article.
  • Elle augmente le temps passé sur la page.
  • Elle renforce la sensation de contrôle.

Sur un blog , surtout avec des tutoriels longs, c’est un véritable plus.

Comment fonctionne une Scroll progress bar ?

Pour bien comprendre, il faut visualiser le mécanisme.

Quand vous scrollez une page, le navigateur connaît :

  • La hauteur totale du document
  • La hauteur visible (la fenêtre)
  • La position actuelle du scroll

L’idée est simple :

  1. On calcule combien de pixels ont été parcourus.
  2. On calcule la hauteur totale scrollable.
  3. On transforme cela en pourcentage.
  4. On applique ce pourcentage à la largeur d’une barre.

Mathématiquement, cela donne :

progression = (scrollY / hauteurScrollable) * 100

Ne vous inquiétez pas si cela semble abstrait pour l’instant. Nous allons tout détailler dans la suite de ce tutoriel.

Voici à quoi cela peut ressembler :

Scroll Progress Bar

Étape 1 : Structure HTML de base

Commençons par créer un fichier index.html.

Voici une structure complète et fonctionnelle :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Scroll Progress Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Barre de progression -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
        <span class="progress-text" id="progressText">0%</span>
    </div>

    <!-- Contenu long pour tester -->
    <div class="content">
        <h1>Mon super article</h1>
        <p>Contenu très long ici...</p>
        <!-- Du faux texte -->
        <p>Lorem ipsum dolor sit amet...</p>
        <p style="height:2000px;"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

Prenons le temps d’expliquer.

Nous avons créé :

  • Un conteneur .progress-container
  • Une barre interne .progress-bar
  • Un texte affichant le pourcentage
  • Du contenu long pour permettre le scroll

La barre est séparée du contenu, ce qui facilitera le style.

Étape 2 : Styliser la Scroll progress bar en CSS

Créons maintenant style.css.

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: #e0e0e0;
    z-index: 1000;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50, #81c784);
    transition: width 0.1s ease-out;
}

.progress-text {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 14px;
    font-weight: bold;
}

.content {
    padding: 80px 20px;
}

Décortiquons ce code CSS.

Pourquoi position: fixed ?

Parce que nous voulons que la Scroll progress bar reste visible même lorsque l’on scrolle.

Sans cela, elle disparaîtrait avec le contenu.

Pourquoi width: 0% ?

Parce qu’au chargement de la page, vous êtes à 0% de lecture.

Le JavaScript modifiera cette valeur dynamiquement.

Étape 3 : Calculer la progression en JavaScript

Créons maintenant script.js.

window.addEventListener("scroll", function() {

    // Position actuelle du scroll
    let scrollTop = document.documentElement.scrollTop;

    // Hauteur totale du document
    let scrollHeight = document.documentElement.scrollHeight;

    // Hauteur visible
    let clientHeight = document.documentElement.clientHeight;

    // Hauteur réellement scrollable
    let scrollableHeight = scrollHeight - clientHeight;

    // Calcul du pourcentage
    let progress = (scrollTop / scrollableHeight) * 100;

    // Appliquer la largeur
    document.getElementById("progressBar").style.width = progress + "%";

    // Afficher le pourcentage arrondi
    document.getElementById("progressText").innerText = Math.round(progress) + "%";
});

Prenons le temps d’expliquer chaque ligne.

  • scrollTop correspond au nombre de pixels déjà parcourus.
  • scrollHeight est la hauteur totale du document.
  • clientHeight correspond à la hauteur visible.

Donc :

scrollableHeight = hauteur totale - hauteur visible

Et ensuite, on transforme cela en pourcentage.

Simple, mais puissant.

Comprendre profondément le calcul

Imaginons une page de 3000 pixels.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

La fenêtre visible fait 1000 pixels.

La zone réellement scrollable est donc :

  • 3000 – 1000 = 2000 pixels

Si vous avez scrollé de 1000 pixels :

  • 1000 / 2000 = 0.5 → 50%

Voilà tout le secret de la Scroll progress bar.

Étape 4 : Améliorer la fluidité

Vous pouvez rendre l’animation plus douce.

Ajoutez simplement dans le CSS :

.progress-bar {
    transition: width 0.2s ease;
}

Cela évite un effet brutal.

Et croyez-moi, ce petit détail change tout visuellement.

Étape 5 : Version plus moderne avec window.scrollY

Si vous souhaitez utiliser une écriture plus moderne :

window.addEventListener("scroll", () => {

    const scrollTop = window.scrollY;
    const scrollHeight = document.body.scrollHeight - window.innerHeight;
    const progress = (scrollTop / scrollHeight) * 100;

    document.getElementById("progressBar").style.width = progress + "%";
    document.getElementById("progressText").innerText = Math.round(progress) + "%";

});

Même logique, mais avec une syntaxe plus actuelle.

Étape 6 : Ajouter un effet premium

Vous pouvez ajouter un effet “glass” ou minimaliste :

.progress-container {
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.6);
}

Ou même un effet dégradé animé :

.progress-bar {
    background: linear-gradient(
        90deg,
        #ff6b6b,
        #feca57,
        #48dbfb,
        #1dd1a1
    );
    background-size: 300%;
    animation: gradientMove 5s infinite linear;
}

@keyframes gradientMove {
    0% { background-position: 0%; }
    100% { background-position: 300%; }
}

Là, vous passez en mode “site premium”.

Optimisation et bonnes pratiques

Une Scroll progress bar semble simple, mais quelques détails comptent :

  • Ne surchargez pas les événements scroll.
  • Évitez les calculs inutiles.
  • Testez sur mobile.
  • Assurez-vous qu’elle ne masque pas le contenu.

Pour les très gros projets, vous pouvez même utiliser requestAnimationFrame pour optimiser les performances.

Scroll progress bar et SEO

Indirectement, une Scroll progress bar améliore :

  • L’expérience utilisateur
  • Le temps passé sur la page
  • L’engagement

Google observe ces signaux comportementaux.

Plus vos visiteurs restent longtemps sur vos tutoriels, plus votre contenu gagne en crédibilité. Ce n’est pas un facteur SEO direct… mais c’est une optimisation UX puissante.

Adapter la Scroll progress bar à WordPress

Si vous souhaitez l’intégrer dans un thème WordPress :

  1. Placez le HTML dans header.php.
  2. Ajoutez le CSS dans votre feuille principale.
  3. Insérez le JavaScript via wp_enqueue_script.

Et voilà.

Aller plus loin : déclencher une animation à 100%

Vous pouvez détecter quand l’utilisateur atteint 100% :

if (progress >= 100) {
    console.log("Article terminé !");
}

Imaginez afficher un message :

“Bravo, vous avez lu jusqu’au bout !”

Cela crée une expérience engageante.

Code complet HTML + CSS + JS

Voici notre exemple complet (HTML + CSS + JavaScript) en une seule fois. Copiez-collez tel quel dans un fichier index.html, ouvrez-le dans votre navigateur, puis scrollez : la Scroll progress bar se remplit et le pourcentage s’affiche en haut à droite.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scroll progress bar avec pourcentage</title>

  <style>
    /* ===== Base ===== */
    body{
      margin:0;
      font-family: Arial, sans-serif;
      line-height:1.6;
      background:#fafafa;
      color:#111;
    }

    /* ===== Scroll progress bar (barre + pourcentage) ===== */
    .progress-wrapper{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:9999;
      pointer-events:none; /* la barre ne gêne pas les clics sur la page */
    }

    .progress-track{
      height:6px;
      background: rgba(0,0,0,0.10);
      backdrop-filter: blur(6px);
    }

    .progress-bar{
      height:100%;
      width:0%;
      background: linear-gradient(90deg, #2ecc71, #1abc9c);
      transition: width 0.12s ease-out;
    }

    .progress-percent{
      position:fixed;
      top:10px;
      right:16px;
      font-size:14px;
      font-weight:700;
      background: rgba(255,255,255,0.75);
      border:1px solid rgba(0,0,0,0.08);
      border-radius:999px;
      padding:6px 10px;
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      z-index:10000;
      pointer-events:none;
    }

    /* ===== Contenu de démonstration ===== */
    .container{
      max-width: 900px;
      margin: 0 auto;
      padding: 72px 18px 60px; /* 72px pour laisser la place à la barre fixe */
    }

    h1{
      margin:0 0 12px;
      font-size: clamp(26px, 3vw, 38px);
      line-height:1.2;
    }

    .intro{
      margin: 0 0 20px;
      color:#333;
      font-size: 16px;
    }

    .card{
      background:#fff;
      border:1px solid rgba(0,0,0,0.08);
      border-radius:16px;
      padding:18px;
      margin: 16px 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }

    .card h2{
      margin: 0 0 10px;
      font-size: 20px;
    }

    .card p{
      margin: 0 0 10px;
    }

    .hint{
      font-size: 14px;
      color:#444;
      background: rgba(46,204,113,0.08);
      border: 1px solid rgba(46,204,113,0.25);
      border-radius: 12px;
      padding: 12px 14px;
    }

    code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.95em;
    }
  </style>
</head>

<body>

  <!-- Barre de progression -->
  <div class="progress-wrapper" aria-hidden="true">
    <div class="progress-track">
      <div class="progress-bar" id="progressBar"></div>
    </div>
  </div>

  <!-- Pourcentage -->
  <div class="progress-percent" id="progressText">0%</div>

  <!-- Contenu long (pour tester le scroll) -->
  <main class="container">
    <h1>Scroll progress bar en haut de page</h1>
    <p class="intro">
      Faites défiler la page : la barre en haut se remplit et le pourcentage change.
      Oui, c’est la petite touche “site sérieux” qui fait plaisir.
    </p>

    <div class="card">
      <h2>À quoi ça sert ?</h2>
      <p>
        Une <strong>Scroll progress bar</strong> indique où vous en êtes dans la lecture.
        Sur un article long, ça rassure et ça motive (un peu comme un niveau dans un jeu… mais sans le boss final).
      </p>
      <p class="hint">
        Astuce : le principe est simple. On calcule la distance déjà scrollée, on la compare à la distance totale scrollable,
        et on transforme ça en pourcentage.
      </p>
    </div>

    <!-- Du contenu factice pour avoir une page longue -->
    <div class="card">
      <h2>Contenu de test</h2>
      <p>Ci-dessous, du texte “long” pour vous permettre de scroller tranquillement.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
      <p>Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
      <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.</p>
      <p>Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem.</p>
      <p>Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.</p>
      <p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p>
      <p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
      <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p>
      <p>Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.</p>
      <p>Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit.</p>
      <p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor.</p>
      <p>Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
      <p style="height: 1400px; margin: 0;"></p>
      <p>Vous êtes presque en bas. Encore un petit scroll et vous passez à 100% !</p>
    </div>
  </main>

  <script>
    // Récupération des éléments
    const progressBar = document.getElementById("progressBar");
    const progressText = document.getElementById("progressText");

    function updateScrollProgress() {
      // Pixels déjà scrollés (en haut -> position actuelle)
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      // Hauteur totale du document
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

      // Hauteur visible (la "fenêtre" / viewport)
      const clientHeight = document.documentElement.clientHeight;

      // Hauteur réellement scrollable
      const scrollableHeight = scrollHeight - clientHeight;

      // Éviter une division par zéro sur une page trop courte
      const progress = scrollableHeight > 0 ? (scrollTop / scrollableHeight) * 100 : 100;

      // Appliquer à la barre (0 à 100%)
      const clamped = Math.min(100, Math.max(0, progress));
      progressBar.style.width = clamped + "%";

      // Afficher le pourcentage arrondi
      progressText.textContent = Math.round(clamped) + "%";
    }

    // Mise à jour au scroll
    window.addEventListener("scroll", updateScrollProgress, { passive: true });

    // Mise à jour au chargement + si la fenêtre change de taille
    window.addEventListener("load", updateScrollProgress);
    window.addEventListener("resize", updateScrollProgress);
  </script>

</body>
</html>
Visualiser la Démo du Scroll Progress Bar

Vous venez de créer votre propre Scroll progress bar avec pourcentage, entièrement codée à la main. Et surtout, vous avez compris le mécanisme derrière le calcul.

Ce n’est pas qu’une barre colorée. C’est un indicateur d’expérience, un outil d’engagement, et un petit détail qui fait toute la différence sur un blog moderne.

Le plus intéressant ? Vous pouvez maintenant l’adapter, la personnaliser, la styliser à votre image. Une Scroll progress bar minimaliste ? Animée ? Transparente ? À vous de jouer. Et si vous l’intégrez sur vos prochains tutoriels… vos lecteurs vous remercieront sans même s’en rendre compte.

Articles relatifs

  1. Scroll CSS : Point d’attache et comportement de défilement
    Le défilement ou scroll en CSS est une fonctionnalité essentielle pour la navigation sur les pages web, en particulier sur les appareils mobiles où l’espace d’écran est limité. Plusieurs propriétés…
  2. 5 exemples de notification animée en CSS
    Découvrez comment créer une notification CSS élégante et animée grâce à 5 exemples concrets, expliqués pas à pas, pour améliorer l’expérience utilisateur et dynamiser vos interfaces web….
  3. Coder un lecteur vidéo en HTML5 | Tutoriel complet
    Apprenez à créer un lecteur vidéo HTML5 personnalisé pas à pas. Utilisez <video>, CSS et JavaScript pour concevoir un lecteur moderne, responsive et élégant, parfait pour vos projets web….
  4. Barre de scroll en CSS : Comment la personnaliser
    La personnalisation d’une barre de scroll en CSS dans les navigateurs web et les éléments HTML scrollables est devenue une pratique populaire parmi les développeurs. Cela améliore l’esthétique et l’expérience…