Needle Gauge
Jauge à aiguille en demi-cadran : cinq zones colorées, une aiguille qui pivote avec un léger rebond vers la valeur posée dans data-value.
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
Le cadran .ndg-arc est un rectangle deux fois plus large que haut, aux coins supérieurs arrondis : un conic-gradient centré en bas au milieu y peint cinq zones (rouge, orange, vert, orange, rouge) sur 180°, et un masque radial-gradient évide le centre. Le trou est donc vraiment transparent : sur un fond clair, aucun disque sombre ne reste au milieu.
L'aiguille .ndg-needle tourne autour de son pied, posé sur le moyeu .ndg-hub au centre du bas du cadran. Le script calcule l'angle (valeur − min) / (max − min) × 180° − 90° et la transition transform 1s cubic-bezier(.34, 1.56, .64, 1) lui donne un petit dépassement avant de se poser. Une valeur hors bornes est affichée telle quelle mais l'aiguille s'arrête en butée.
Tout se règle dans le HTML : data-value, data-min et data-max (0 et 100 par défaut), data-unit, data-decimals, data-label. Un MutationObserver surveille ces attributs : racine.setAttribute('data-value', 42) suffit pour déplacer l'aiguille, sans fonction globale. Chaque .fx-0244-root est autonome, plusieurs jauges cohabitent dans une page.
Quand la jauge entre à l'écran (IntersectionObserver, seuil 35 %), l'aiguille part de la butée gauche et balaie jusqu'à la valeur. Le chiffre et les graduations min / milieu / max sont mis en forme par Intl.NumberFormat dans la langue de la page (lang).
Accessibilité
- Rôle meter : le bloc
.ndg-gaugereçoitrole="meter"avecaria-valuemin,aria-valuemax,aria-valuenowetaria-valuetext(valeur et unité mises en forme) ; son nom vient dedata-label. Le cadran et les graduations sontaria-hidden. - Couleur doublée d'un nombre : la zone où tombe l'aiguille n'est pas la seule information, la valeur est toujours écrite sous le cadran. Si vos zones ont un sens (trop sec, idéal…), écrivez-le aussi en texte à côté de la jauge.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'aiguille est posée directement sur la valeur, sans balayage ni rebond, à l'affichage comme à chaque changement. - Aucune interaction propre : la jauge affiche une valeur, elle ne se manipule pas. Si l'utilisateur doit choisir la valeur, donnez-lui un vrai
<input type="range">qui met à jourdata-value, comme dans l'exemple du café.
Compatibilité navigateur
Repose sur conic-gradient, mask-image (avec sa forme -webkit-), aspect-ratio, IntersectionObserver et MutationObserver. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : aiguille visible au repos et après changement, deux jauges indépendantes dans la même page, mouvement réduit, largeur 390 px, fond blanc, aucune erreur JS.
Sans JavaScript, le cadran coloré, la valeur et les graduations écrites dans le HTML restent affichés ; l'aiguille reste en butée gauche. Sans IntersectionObserver, l'aiguille se pose tout de suite sur la valeur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0244-root" data-value="72" data-min="0" data-max="100" data-label="Niveau">
<div class="ndg-gauge">
<div class="ndg-dial" aria-hidden="true">
<div class="ndg-arc"></div>
<div class="ndg-needle"></div>
<div class="ndg-hub"></div>
</div>
<div class="ndg-value">72</div>
<div class="ndg-scale" aria-hidden="true">
<span class="ndg-min">0</span>
<span class="ndg-mid">50</span>
<span class="ndg-max">100</span>
</div>
</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 |
|---|---|---|
data-value, data-min, data-max (HTML, sur la racine) |
72, 0, 100 | La valeur et les bornes. Changer data-value en JS fait pivoter l'aiguille ; les graduations affichent min, milieu et max. |
data-unit et data-decimals (HTML) |
aucune unité, 0 décimale | % donne un pourcentage mis en forme selon la langue (« 72 % » / « 72% ») ; tout autre texte est ajouté après le nombre (« 12 cents »). Jusqu'à 3 décimales. |
data-label (HTML) |
« Niveau » | Nom de la jauge lu par les lecteurs d'écran. |
--ndg-z1 à --ndg-z4 (CSS) |
20, 40, 80, 90 | Seuils des cinq zones en pourcentage de l'arc : rouge jusqu'à z1, orange jusqu'à z2, vert jusqu'à z3, orange jusqu'à z4, rouge ensuite. |
--ndg-low, --ndg-warn, --ndg-good (CSS) |
#ef4444, #f59e0b, #22c55e | Couleurs des zones extrêmes, intermédiaires et centrale. |
--ndg-size et --ndg-hole (CSS) |
240px, 78% | Largeur maximale du cadran (il rétrécit avec son conteneur) et rayon du trou : 60 % donne un arc épais, 88 % un arc fin. |
--ndg-needle, --ndg-accent, --ndg-muted (CSS) |
dégradé indigo-violet, #a78bfa, blanc 50 % | Aiguille, moyeu et chiffre, graduations. À foncer sur un fond clair. |
--ndg-speed (CSS) |
1s | Durée du pivot de l'aiguille. |
--ndg-bg et --ndg-min-height (CSS) |
#0a0a0f, 300px | Fond et hauteur minimale de la racine : transparent et 0 pour intégrer la jauge dans une carte. |
FAQ
document.querySelector('#ma-jauge').setAttribute('data-value', mesure). Le script observe l'attribut et fait pivoter l'aiguille ; pas d'appel de fonction ni de variable globale. Mettez data-min et data-max à l'échelle de vos mesures (−50 à 50, 0 à 3 000…).cubic-bezier(.34, 1.56, .64, 1) : sa deuxième valeur au-dessus de 1 produit un rebond. Pour un mouvement sans dépassement, remplacez-la par ease-out dans la règle .ndg-needle. Le rebond disparaît de lui-même pour les visiteurs qui ont demandé moins d'animations.--ndg-z1 à --ndg-z4 sont des pourcentages de l'arc. Pour un vert centré et étroit : 12, 40, 60, 88. Pour « plus c'est haut, mieux c'est » : 20, 40, 100, 100 (rouge, orange puis vert jusqu'au bout). Les couleurs se changent avec --ndg-low, --ndg-warn et --ndg-good.
