Gauge Meter
Jauge en demi-cercle, du vert au rouge, avec une aiguille qui pivote jusqu'à la valeur quand la jauge apparaît, puis suit chaque nouvelle valeur.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Tout le dessin tient dans un SVG de 160 × 100 : un demi-cercle de rayon 60 (.gmtr-track), le même demi-cercle peint en dégradé vert → jaune → rouge (.gmtr-fill), une aiguille blanche (.gmtr-needle) qui pivote autour du moyeu placé au centre du cadran, et la valeur écrite en dessous (.gmtr-value). L'arc et l'aiguille indiquent toujours la même valeur : 70 % peint 70 % du demi-cercle et place l'aiguille à 36° (de −90° pour 0 % à +90° pour 100 %). Le texte est sous le moyeu, l'aiguille ne passe donc jamais dessus.
La valeur se lit dans aria-valuenow (entre aria-valuemin et aria-valuemax, 0 et 100 par défaut). Par défaut le texte est un pourcentage au format de la page (« 70 % », « 70% » en anglais) ; avec data-unit, il montre la valeur brute suivie de l'unité, par exemple aria-valuemax="10" data-unit=" / 10" donne « 7 / 10 ».
Arc et aiguille restent à zéro jusqu'à ce que la jauge soit visible à moitié, puis montent en 2 s (ease-out), une seule fois. Une nouvelle valeur écrite ensuite dans aria-valuenow fait glisser l'aiguille et l'arc jusqu'à elle. Chaque jauge a son propre id de dégradé et rien n'est déclaré sur window : plusieurs jauges cohabitent dans la page.
Accessibilité
- Rôle :
role="meter"(une mesure dans un intervalle connu), avecaria-valuetextrecopié du texte affiché. Nommez la jauge avecaria-label(« Effort estimé », « Remplissage du bac »). - Couleur et texte : le dégradé n'est pas la seule information, la valeur est écrite en chiffres sous l'aiguille.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, ni pivot ni remplissage animé ; la jauge affiche sa valeur dès qu'elle apparaît et saute directement aux valeurs suivantes. - Lecture : une nouvelle valeur n'est pas annoncée d'elle-même (une jauge n'est pas une zone live) ; si le changement compte, annoncez-le dans une zone
aria-liveà vous.
Compatibilité navigateur
SVG, transformations CSS sur éléments SVG, variables CSS et JavaScript sans dépendance (environ 2,5 Ko). Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : arc à 70 % et aiguille à 36° dans les trois, arc entier sans coupure, jauge placée plus bas qui attend le défilement, nouvelle valeur sur la 2e copie sans toucher la 1re, 390 px, mouvement réduit, aucune erreur. Versions tirées de @mdn/browser-compat-data : IntersectionObserver fixe le minimum.
Sans IntersectionObserver, la jauge prend sa valeur au chargement. Sans JavaScript, le cadran est vide, l'aiguille couchée à gauche, et le texte du HTML (« 70 % ») reste lisible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0228-root">
<div class="gmtr-gauge" role="meter" aria-label="Niveau" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
<svg class="gmtr-svg" viewBox="0 0 160 100" aria-hidden="true">
<defs><linearGradient id="gmtr-grad">…</linearGradient></defs>
<path class="gmtr-track"></path>
<path class="gmtr-fill"></path>
<rect class="gmtr-needle"></rect>
<circle class="gmtr-halo"></circle>
<circle class="gmtr-hub"></circle>
</svg>
<span class="gmtr-value">70 %</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Valeur (HTML — aria-valuenow sur .gmtr-gauge) |
70 | À changer au départ ou en JavaScript (jauge.setAttribute('aria-valuenow', 45)) : arc, aiguille et texte suivent. |
Bornes (HTML — aria-valuemin, aria-valuemax) |
0 et 100 | Une note sur 10 : aria-valuemax="10". L'aiguille se place selon la part de l'intervalle. |
Unité affichée (HTML — data-unit) |
absent : pourcentage (« 70 % ») | Présent, le texte devient la valeur brute plus l'unité : data-unit=" / 10" → « 7 / 10 », data-unit=" km/h" → « 70 km/h ». |
Nom pour les lecteurs d'écran (HTML — aria-label) |
Niveau | Ce que mesure la jauge : « Effort estimé », « Charge du serveur ». |
Couleurs du cadran (CSS — --gmtr-low, --gmtr-mid, --gmtr-high, --gmtr-track) |
#22c55e · #eab308 · #ef4444 · indigo à 20 % | Le dégradé va de gauche à droite. Si le haut de l'échelle est une bonne nouvelle (batterie pleine), inversez --gmtr-low et --gmtr-high. |
Aiguille et moyeu (CSS — --gmtr-needle, --gmtr-glow) |
#fff · indigo à 35 % | Sur fond clair, une aiguille sombre (#1f2937) et un halo léger ou transparent. |
Taille (CSS — --gmtr-size) |
160px | Largeur de la jauge ; le texte fait 12,5 % de cette largeur. |
Durée (CSS — --gmtr-duration) |
2s | Durée du premier pivot et des suivants. |
Fond, texte et hauteur (CSS — --gmtr-bg, --gmtr-text, --gmtr-height) |
#0a0a0f · #fff · 300px | Sur une page claire : --gmtr-bg:transparent; --gmtr-text:#111827; --gmtr-height:0px. |
FAQ
.gmtr-value{display:none} dans votre CSS. La valeur reste annoncée aux lecteurs d'écran par aria-valuetext. Pensez alors à l'écrire ailleurs si la couleur seule ne suffit pas à vos visiteurs.aria-valuemin="0" aria-valuemax="180"), mettez la mesure dans aria-valuenow et l'unité dans data-unit (" km/h"). Le nombre suit le format de la page, décimale comprise.data-unit est utilisé.
