Comparison Bars
Barres horizontales fines, libellé à gauche et valeur à droite, qui s'allongent l'une après l'autre quand la liste entre à l'écran.
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
Chaque ligne est un li.cmpb-item de la liste ul.cmpb-list : sa valeur dans data-value, son libellé dans span.cmpb-label. Le script ajoute à droite du libellé le texte .cmpb-value et, en dessous, une piste .cmpb-track (décorative) avec son remplissage .cmpb-fill. La valeur affichée et la longueur viennent du même attribut : impossible d'écrire « 85 % » au-dessus d'une barre remplie à 62 %.
La longueur vaut valeur ÷ data-max (100 par défaut), plafonnée à la piste entière. Le texte est écrit avec Intl.NumberFormat dans la langue de la page : avec data-unit="%", « 85 % » en français et « 85% » en anglais ; avec une autre unité, par exemple km, « 120 km ». Les libellés trop longs sont coupés par des points de suspension plutôt que de pousser la valeur hors de la ligne.
L'animation attend le visiteur : un IntersectionObserver ajoute la classe cmpb-on quand 35 % de la liste est visible. Chaque remplissage passe alors de scaleX(0) à scaleX(1) depuis la gauche, en 1,5 s (ease-out), à 0,1 s puis 0,2 s d'intervalle d'une ligne à l'autre. Trois dégradés (indigo-violet, magenta-rose, rouge-rose clair) se répètent toutes les trois lignes.
Accessibilité
- Texte réel : chaque ligne se lit « Atelier A 85 % » dans une liste nommée par son
aria-label. La piste et son remplissage sont masqués aux lecteurs d'écran. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les barres sont affichées pleines dès le départ. - Rien d'interactif : aucune ligne ne prend le focus et rien ne change au survol ou au toucher.
- Contraste : sur fond clair, foncez
--cmpb-labelet--cmpb-value; la valeur par défaut des chiffres (blanc à 50 %) est pensée pour le fond sombre d'origine.
Compatibilité navigateur
HTML et CSS (grille, variables, transform: scaleX) avec un court script (IntersectionObserver, Intl.NumberFormat). Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies indépendantes, la seconde attend d'être vue, mouvement réduit, 390 px de large, aucune erreur.
Sans IntersectionObserver, les barres s'allongent dès le chargement. Sans JavaScript, seuls les libellés apparaissent : ni valeur ni barre.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0230-root" data-unit="%">
<ul class="cmpb-list" aria-label="Taux de remplissage des ateliers">
<li class="cmpb-item" data-value="85"><span class="cmpb-label">Atelier A</span></li>
<li class="cmpb-item" data-value="62"><span class="cmpb-label">Atelier B</span></li>
<li class="cmpb-item" data-value="78"><span class="cmpb-label">Atelier C</span></li>
</ul>
</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 |
|---|---|---|
Valeurs (HTML — data-value sur chaque li.cmpb-item) |
85, 62, 78 | Une valeur positive par ligne ; le texte affiché est calculé à partir d'elle. |
Maximum (HTML — data-max sur la racine) |
100 | Valeur qui remplit la piste entière (ex. data-max="150" pour des kilomètres). |
Unité (HTML — data-unit sur la racine) |
% |
% pour un pourcentage au format de la page, sinon n'importe quel mot court (km, h, pts) ajouté après le nombre ; vide pour un nombre seul. |
Couleurs (CSS — --cmpb-c1, --cmpb-c2, --cmpb-c3) |
Dégradés indigo → violet, magenta → rose, rouge → rose clair | Fond de chaque remplissage, répété toutes les trois lignes. |
Piste (CSS — --cmpb-track, --cmpb-thickness) |
rgba(99, 102, 241, .2), 8 px | Couleur du fond de piste et épaisseur des barres. |
Textes (CSS — --cmpb-label, --cmpb-value) |
Blanc à 80 %, blanc à 50 % | Couleur des libellés et des valeurs. |
Taille et fond (CSS — --cmpb-max-width, --cmpb-min-height, --cmpb-bg) |
420 px, 300 px, #0a0a0f | Largeur maximale de la liste (none pour remplir), hauteur minimale de la racine, fond. |
FAQ
data-max : avec data-max="150", 140 remplit 93 % de la piste. Une valeur supérieure au maximum remplit la piste entière, sans déborder, et son texte reste exact.--cmpb-c1 à --cmpb-c3 couvrent trois lignes puis se répètent. Pour plus de couleurs, ajoutez une règle .cmpb-item:nth-child(4) .cmpb-fill { background: … } dans votre CSS.IntersectionObserver est déconnecté après la première apparition. Le graphique reste ensuite affiché à son état final.
