Bar Chart Race
Classement en barres horizontales : quand une valeur change, les barres s'allongent et les lignes glissent jusqu'à leur nouveau rang.
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 classement est une vraie liste ordonnée <ol class="rce-list"> : chaque <li class="rce-item" data-value="…"> contient son libellé. Le script ajoute à chaque ligne une piste .rce-track avec sa barre .rce-bar et la valeur chiffrée .rce-val. La plus grande valeur occupe toute la piste, les autres en proportion (ou par rapport à data-max si vous le fixez).
Quand un data-value change, le script relève la position de chaque ligne, les remet dans l'ordre décroissant dans le DOM, puis les fait partir de leur ancienne place avec un translateY qu'il ramène à zéro : c'est la technique FLIP. Les lignes glissent ainsi vers leur nouveau rang pendant que les largeurs de barres changent (transition de 0,8 s, courbe cubic-bezier(.23, 1, .32, 1)). Plusieurs valeurs changées d'un coup ne donnent qu'un seul réordonnancement.
Chaque ligne reçoit au démarrage une teinte parmi cinq dégradés (ambre, bleu, rouge, cyan, violet) selon sa place d'origine, et la garde quand elle monte ou descend. À la première apparition à l'écran, les barres poussent depuis zéro.
Le libellé est tronqué avec des points de suspension s'il dépasse sa colonne (--rce-label-width) ; la valeur est mise en forme dans la langue de la page avec data-unit.
Accessibilité
- L'ordre lu est l'ordre affiché : les lignes sont réellement déplacées dans le DOM (pas de propriété
order), un lecteur d'écran parcourt donc la liste du premier au dernier comme on la voit. Chaque ligne se lit « libellé, valeur ». - Nom de la liste : l'
aria-labelde.rce-list(« Classement ») dit ce qui est classé ; adaptez-le à vos données. - Mouvement réduit : sous
prefers-reduced-motion: reduce, barres et lignes prennent leur taille et leur place finales sans glisser, au premier affichage comme aux mises à jour. - Pas d'annonce automatique : un changement de rang n'est pas lu à voix haute. Si un dépassement compte (nouveau premier), annoncez-le dans une phrase à part.
Compatibilité navigateur
CSS Grid, transitions de width et transform, MutationObserver, IntersectionObserver et Intl.NumberFormat. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : à 150 ms après un changement, les lignes sont entre leur ancienne et leur nouvelle place dans les trois moteurs ; deux classements indépendants dans la même page, 390 px, fond blanc, aucune erreur JS.
Sans JavaScript, la liste ordonnée et ses libellés restent lisibles, sans barres ni valeurs : ajoutez la valeur dans le texte du libellé si elle doit rester visible sans script.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0245-root">
<ol class="rce-list" aria-label="Classement">
<li class="rce-item" data-value="70"><span class="rce-label">Ambre</span></li>
<li class="rce-item" data-value="60"><span class="rce-label">Cobalt</span></li>
<li class="rce-item" data-value="45"><span class="rce-label">Corail</span></li>
<li class="rce-item" data-value="40"><span class="rce-label">Lagon</span></li>
<li class="rce-item" data-value="35"><span class="rce-label">Lilas</span></li>
</ol>
</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 sur chaque .rce-item (HTML) |
70, 60, 45, 40, 35 | Valeur de la ligne. La changer relance l'allongement des barres et le reclassement. |
data-max sur la racine (HTML) |
la plus grande valeur | Valeur qui correspond à une barre pleine ; utile pour une échelle fixe (ex. 100). |
data-unit, data-decimals (HTML) |
aucune, 0 | Unité ajoutée après chaque valeur (« 42 pts ») et décimales. |
--rce-color (CSS, sur une ligne ou pour tout le classement) |
5 dégradés tournants | Couleur d'une barre. Posée sur une ligne (style="--rce-color:…"), elle la suit dans tous ses déplacements. Pour tout le classement, utilisez une règle placée après le CSS de l'effet et plus précise que .rce-item seul, par exemple .mon-classement .rce-item : sinon les cinq teintes par défaut l'emportent. |
--rce-bar-height, --rce-gap (CSS) |
24px, 8px | Épaisseur des barres et espace entre les lignes. |
--rce-label-width, --rce-max-width (CSS) |
4.5em, 420px | Largeur de la colonne des libellés et largeur maximale du classement. |
--rce-text, --rce-value (CSS) |
blanc 70 %, blanc 60 % | Couleurs des libellés et des valeurs ; à foncer sur fond clair. |
--rce-speed (CSS) |
.8s | Durée des glissements de barres et de lignes. |
--rce-bg, --rce-min-height (CSS) |
#0a0a0f, 300px | Fond et hauteur minimale de la racine. |
FAQ
lignes.forEach((li, i) => li.setAttribute('data-value', scores[i])). Le script attend la fin du bloc avant de reclasser, les lignes ne partent donc qu'une fois, toutes ensemble.--rce-bar-height et --rce-gap, et pensez qu'un mouvement de dix lignes à la fois devient difficile à suivre.
