Comment coder un compteur ou jauge dynamique en CSS

Coder un compteur de vitesse CSS, aussi appelé Gauge CSS, est un exercice passionnant. Nous allons apprendre à manipuler le CSS de manière visuelle, mais aussi comment combiner SVG, animation et JavaScript pour produire une interface moderne et interactive.

Contrairement à ce que l’on pourrait croire, il n’est pas nécessaire d’utiliser une librairie lourde pour créer ce type de composant. Avec quelques lignes de HTML, un peu de CSS et du JavaScript, vous pouvez afficher une jauge élégante, animée et dynamique.

• Coder une jauge ou un compteur de vitesse visuel en CSS pour afficher facilement un score, une performance ou un indicateur dans une interface web moderne.
• Les principes essentiels permettent de transformer une simple valeur numérique en élément graphique dynamique et lisible dans un tableau de bord.
• Intégrer ce type de composant interactif dans vos projets web afin d’améliorer l’ergonomie, la lisibilité des données et l’expérience utilisateur.

Dans ce tutoriel, nous allons décortiquer pas à pas le code d’une jauge fonctionnelle afin que vous puissiez comprendre chaque principe et l’adapter à vos propres projets.

Même si vous débutez en développement web, à la fin de ce tutoriel, vous serez capable de coder ceci :

Qu’est-ce qu’un compteur de vitesse CSS ou Gauge CSS ?

Un compteur de vitesse CSS est un élément graphique qui permet de représenter une valeur sous forme de jauge.

On le retrouve souvent dans :

• les dashboards
• les indicateurs de performance
• les scores SEO
• les tableaux de bord analytics
• les scores de santé d’un site web

Visuellement, c’est le même principe que :

• un compteur de voiture
• un compteur de batterie
• une jauge de progression

Au lieu d’afficher simplement un chiffre, la jauge permet de visualiser immédiatement la performance.

Par exemple :

• rouge → mauvais score
• orange → score moyen
• vert → bon score

C’est beaucoup plus intuitif pour l’utilisateur.

Aperçu du code de notre Gauge CSS

Voici la structure que nous allons analyser. Ce code crée une jauge semi-circulaire animée affichant un score en pourcentage.

Elle possède :

• un arc de fond
• un arc représentant la valeur
• un séparateur
• un pourcentage animé

Et tout cela est généré à partir d’une simple valeur :

<div class="site-health" data-value="83">

La valeur 83 correspond ici à 83 %.

Comprendre la structure HTML

Commençons par la base.

<div class="site-health" data-value="83">

Cette div représente notre composant de jauge.

L’attribut :

data-value="83"

est très important.

Il sert à stocker la valeur à afficher.

Pourquoi utiliser un attribut data- ?

Parce qu’il permet de :

• stocker des données directement dans le HTML
• récupérer ces données en JavaScript
• rendre le composant réutilisable

Par exemple, vous pourriez créer plusieurs jauges :

<div class="site-health" data-value="45"></div>
<div class="site-health" data-value="72"></div>
<div class="site-health" data-value="91"></div>

Chaque jauge affichera un score différent.

Pourquoi utiliser SVG pour une Gauge CSS ?

À l’intérieur de notre HTML, on trouve :

<svg viewBox="0 0 200 120">

SVG signifie Scalable Vector Graphics.

Contrairement à une image classique :

• il est vectoriel
• il peut être animé
• il est manipulable avec CSS et JavaScript

Pour une jauge CSS, SVG est idéal.

Pourquoi ?

Parce que l’on peut dessiner facilement :

• des arcs
• des cercles
• des chemins

Dessiner la jauge avec un arc SVG

Voici la ligne clé :

<path d="M20 100 A80 80 0 0 1 180 100" />

Cela peut sembler un peu intimidant au début.

Mais décomposons.

M20 100

signifie :

déplacer le point de départ en position (20,100)

Ensuite :

A80 80

indique que l’on dessine un arc de rayon 80.

Enfin :

180 100

est le point d’arrivée.

Résultat : cela dessine un demi-cercle.

Le fond de la jauge

Voici l’arc de fond :

<path class="gauge-bg"/>

Le CSS associé :

.gauge-bg{
    fill:none;
    stroke:#e5e5e5;
    stroke-width:22;
}

Explication :

• fill:none → pas de remplissage
• stroke → couleur du trait
• stroke-width → épaisseur

Cela crée la base grise de la jauge.

La partie dynamique de la Gauge CSS

L’arc important est celui-ci :

<path class="gauge-value"/>

Son CSS :

stroke-dasharray:0 100;
transition:stroke-dasharray 1s ease;

C’est ici que la magie opère.

Le secret : stroke-dasharray

La propriété :

stroke-dasharray

permet de définir la longueur visible du trait.

Par exemple :

stroke-dasharray: 50 100;

signifie :

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 ?

• afficher 50 % du trait
• masquer le reste

Donc si nous mettons :

83 100

nous affichons 83 % de l’arc.

C’est exactement ce que nous voulons.

Pourquoi utiliser pathLength="100"

Dans le SVG, on trouve :

pathLength="100"

Cela normalise la longueur du chemin.

• Autrement dit : le chemin complet = 100 unités

Ce qui permet de travailler directement en pourcentage.

Donc :

stroke-dasharray:83 100

= 83 %

C’est extrêmement pratique.

Afficher le score au centre

Dans notre HTML :

<div class="score">0%</div>

Ce texte sera mis à jour en JavaScript.

Le CSS :

.score{
    position:absolute;
    left:0;
    right:0;
    top:63%;
    transform:translateY(-50%);
}

Cela permet de centrer le texte dans la jauge.

Rendre la Gauge CSS dynamique avec JavaScript

Passons maintenant au script.

document.querySelectorAll(".site-health").forEach(gauge => {

Cela signifie :

sélectionner toutes les jauges présentes sur la page.

Ensuite :

let value = parseInt(gauge.dataset.value) || 0;

On récupère la valeur dans :

data-value

Par exemple :

data-value="83"

devient :

83

Sécuriser la valeur

Ensuite :

value = Math.max(0, Math.min(100, value));

Cela garantit que la valeur reste entre :

0 et 100

Même si quelqu’un met :

data-value="300"

la jauge affichera 100.

L’animation progressive de la jauge

Voici la fonction d’animation :

const animate = () => {

    if(current <= value){

        arc.style.strokeDasharray = current + " 100";

        score.textContent = current + "%";

        current++;

        requestAnimationFrame(animate);
    }

};

Le principe est simple : La variable current commence à 0. Puis elle augmente progressivement jusqu’à la valeur finale.

À chaque étape :

• on met à jour l’arc
• on met à jour le texte

L’animation devient fluide grâce à :

requestAnimationFrame

C’est la méthode recommandée pour les animations.

Ajouter une couleur dynamique

La jauge change aussi de couleur selon le score.

if(value < 40){
    arc.style.stroke = "#e63946";
}
else if(value < 80){
    arc.style.stroke = "#f4a261";
}
else{
    arc.style.stroke = "#2a9d8f";
}

Cela crée trois niveaux :

Score	Couleur
0-39	Rouge
40-79	Orange
80-100	Vert

C’est une bonne pratique UX.

L’utilisateur comprend immédiatement la qualité du score.

Pourquoi ajouter un séparateur ?

Dans le code, on trouve aussi :

<path class="gauge-separator"/>

Ce séparateur crée un petit effet visuel entre :

• la partie remplie
• la partie vide

Cela améliore la lisibilité de la jauge.

Améliorer encore votre compteur de vitesse CSS

Une fois que vous maîtrisez cette base, vous pouvez aller beaucoup plus loin. Par exemple : Ajouter un dégradé de couleur

stroke: url(#gradient);

• Créer une aiguille animée
• Ajouter des graduations
• Afficher une valeur maximale
• Créer une jauge circulaire complète

Ou encore intégrer la jauge dans :

• un dashboard SEO
• un tableau de bord analytics
• une extension WordPress

Pourquoi les Gauge CSS sont devenues populaires

Les interfaces modernes utilisent de plus en plus :

• graphiques
• jauges
• dashboards

Pourquoi ?

Parce que l’œil humain comprend les formes et les couleurs plus rapidement que les chiffres.

Une jauge permet donc :

• une lecture instantanée
• une meilleure ergonomie
• un design moderne

Le code complet

<div class="site-health" data-value="83">
  <svg viewBox="0 0 200 120">
    <!-- fond -->
    <path d="M20 100 A80 80 0 0 1 180 100" class="gauge-bg" pathLength="100" />

    <!-- jauge -->
    <path
      d="M20 100 A80 80 0 0 1 180 100"
      class="gauge-value"
      pathLength="100"
    />

    <!-- séparation -->
    <path
      d="M20 100 A80 80 0 0 1 180 100"
      class="gauge-separator"
      pathLength="100"
    />
  </svg>

  <div class="score">0%</div>
</div>

<style>
  .site-health {
    width: 260px;
    margin: auto;
    text-align: center;
    font-family: system-ui;
    position: relative;
  }

  .exemple svg {
    width: 100%;
  }

  .gauge-bg {
    fill: none;
    stroke: #e5e5e5;
    stroke-width: 22;
  }

  .gauge-value {
    fill: none;
    stroke-width: 22;
    stroke-linecap: butt;
    stroke-dasharray: 0 100;
    transition: stroke-dasharray 1s ease;
  }

  .gauge-separator {
    fill: none;
    stroke: #fff;
    stroke-width: 24;
  }

  .exemple .score {
    position: absolute;
    left: 0;
    right: 0;
    top: 63%;
    transform: translateY(-50%);
    font-size: 34px;
    font-weight: 700;
    color: #333;
  }
</style>

<script>
  document.querySelectorAll(".site-health").forEach((gauge) => {
    let value = parseInt(gauge.dataset.value) || 0;
    value = Math.max(0, Math.min(100, value));

    const arc = gauge.querySelector(".gauge-value");
    const sep = gauge.querySelector(".gauge-separator");
    const score = gauge.querySelector(".score");

    let current = 0;

    const animate = () => {
      if (current <= value) {
        arc.style.strokeDasharray = current + " 100";
        sep.style.strokeDasharray = "1 99";
        sep.style.strokeDashoffset = -current;

        score.textContent = current + "%";

        current++;
        requestAnimationFrame(animate);
      }
    };

    /* couleur dynamique */

    if (value < 40) {
      arc.style.stroke = "#e63946";
    } else if (value < 80) {
      arc.style.stroke = "#f4a261";
    } else {
      arc.style.stroke = "#2a9d8f";
    }

    animate();
  });
</script>

---

Créer un compteur de vitesse CSS ou une Gauge CSS peut sembler impressionnant au premier regard. Pourtant, comme vous venez de le voir, le principe repose sur quelques idées simples : un arc SVG, une propriété stroke-dasharray pour contrôler la progression, et un peu de JavaScript pour animer le tout.

Ce type de composant est extrêmement utile dans de nombreux projets web. Que ce soit pour afficher un score SEO, un indicateur de performance ou un tableau de bord interactif, la jauge apporte immédiatement une dimension visuelle claire et moderne.

Et surtout, une fois que vous avez compris le mécanisme, vous pouvez laisser parler votre créativité : couleurs dynamiques, animations plus sophistiquées, jauges circulaires complètes ou même dashboards complets. Bref, vous venez d’ajouter un nouvel outil très puissant à votre boîte à outils de développeur.

Alors maintenant, à vous de jouer. Ouvrez votre éditeur de code, expérimentez… et amusez-vous à construire votre propre Gauge CSS personnalisée. C’est souvent en bricolant que l’on apprend le mieux — et parfois même avec un grand sourire devant son écran.

Pour aller plus loin en CSS :

• Coder un bouton en CSS effet Liquid Glass comme sur iOS 26
• Coder un croll progress bar avec pourcentage
• Exemple de Card produit moderne en CSS