Vendre et promouvoir · Promotions et lancements

Jauge circulaire de score KPI avec graduation animée

Animez un indicateur de performance clé (taux de satisfaction, complétion, score de vitesse) sous forme de tachymètre moderne.

Débutant Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un spécialiste des tableaux de bord analytiques et des micro-animations de progression métrique.

Contexte

Je veux intégrer un indicateur de performance phare sur mon produit [nom du SaaS ou rapport d'activité]. L'indicateur est [nom du KPI, ex: 'Score d'optimisation SEO' ou 'Taux de réussite des transactions']. La valeur à atteindre est de [valeur cible, ex: 98% ou 850 sur 1000]. Les couleurs passent du [rouge/orange pour l'état bas vers le vert/bleu éclatant pour l'état haut].

Tâche

Rédige le code autonome (HTML, SVG et CSS avec script JavaScript) d'une jauge semi-circulaire ou circulaire à 270 degrés. L'aiguille ou la barre de progression s'élance depuis 0 avec un effet de ressort (overshoot) avant de se stabiliser sur le score exact, tandis que le compteur numérique au centre compte les points à toute vitesse et que des graduations lumineuses s'allument au passage.

Format

Un fichier HTML autonome prêt à l'emploi avec un curseur interactif permettant de tester dynamiquement n'importe quelle valeur entre 0 et 100.

À remplacer avant de coller : [nom du SaaS ou rapport d'activité] · [valeur cible, ex: 98% ou 850 sur 1000]

Pourquoi ça marche mieux

Demande vague

« fais un compteur rond qui monte à 98% »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Cinématique du tachymètre numérique : - Arc de jauge : SVG 'stroke-dasharray' calculé sur 270 degrés (ouverture vers le bas). - Animation d'élan : durée 1,6 seconde, dépassement de 3% (overshoot élastique) avant retour précis sur la valeur cible. - Dégradé conique (conic-gradient) ou SVG linear-gradient passant de l'ambre chaud au vert menthe éclatant. - Graduations : 20 tirets vectoriels discrets disposés en cercle s'illuminant au fur et à mesure de l'avancée de la jauge. - Compteur chiffré central : taille 36px en police grasse sans empattement avec unité animée en exposant.

Pour améliorer la réponse, relancez

Ajoute une comparaison dynamique avec la moyenne du secteur.
Propose une variante en barre de progression horizontale segmentée.

Conseil. Les jauges ouvertes à 270 degrés (style tableau de bord automobile ou jauge de vitesse Google PageSpeed) sont perçues comme beaucoup plus dynamiques qu'un cercle fermé à 360 degrés.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite