Animated Icons
Une coche verte et une croix rouge qui se tracent trait après trait dans leur cercle, puis restent affichées : en boucle, ou une seule fois à la demande.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque icône est un SVG de 60×60 unités : un cercle de rayon 26 (.chx-ring, trait de 3) et, à l'intérieur, la coche (.chx-tick) ou les deux barres de la croix (.chx-bar-1, .chx-bar-2), en traits de 4 aux bouts arrondis. Tous portent pathLength="100" et un tiret de 100 que l'animation fait glisser de 100 à 0 pour faire apparaître le trait.
Tout se joue sur un seul cycle (--chx-speed, 2,4 s) : le cercle se trace pendant les premiers 35 %, la coche entre 25 et 50 % ; pour la croix, la première barre entre 25 et 40 %, la seconde entre 38 et 53 %. L'icône reste ensuite complète jusqu'à la fin du cycle. En boucle (réglage par défaut), elle se redessine toutes les 2,4 s ; avec --chx-repeat: 1, elle se dessine une fois et reste.
Chaque trait suit la même horloge que son cercle : la croix se dessine une fois par cycle, sans clignoter. Les deux icônes fonctionnent chacune seule : gardez celle qui vous sert. Une icône masquée (display: none) puis réaffichée se redessine depuis le début ; --chx-play: paused la fait attendre, vide.
Accessibilité
- Nom lisible : chaque SVG porte
role="img"et un<title>(« Valide », « Erreur » ; en anglais « Valid », « Error »), que les lecteurs d'écran annoncent. Changez ce texte si l'icône dit autre chose. - Pas seulement la couleur : la coche et la croix ont des formes différentes. Pour une validation de formulaire, ajoutez un message écrit dans une zone
aria-live: l'apparition de l'icône n'est pas annoncée d'elle-même. - Mouvement réduit : avec
prefers-reduced-motion: reduce, les icônes s'affichent directement complètes (mesuré dans les trois moteurs : 0 animation en cours). - Contraste : sur le fond sombre livré, le vert atteint 7,8:1 et le rouge 5,3:1. Sur un fond blanc, le vert
#10b981tombe à 2,5:1 : prenez un vert plus foncé (#15803d) via--chx-ok.
Compatibilité navigateur
CSS seul. pathLength sur un cercle demande Chrome 57, Firefox 61 et Safari 14 ; le mouvement réduit, Chrome 74 et Firefox 63. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 0 erreur, chaque trait redémarre une seule fois en 3 s, deux copies indépendantes, rien qui déborde à 390 px.
Sans animations CSS, les icônes s'affichent complètes. Avant Safari 14, pathLength est ignoré pour les tirets : les cercles se dessinent en pointillés.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0603-root">
<svg class="chx-icon chx-check" viewBox="0 0 60 60" role="img">
<title>Valide</title>
<circle class="chx-ring" pathLength="100" …/>
<path class="chx-tick" pathLength="100" d="…"/>
</svg>
<svg class="chx-icon chx-cross" viewBox="0 0 60 60" role="img">
<title>Erreur</title>
<circle class="chx-ring" pathLength="100" …/>
<path class="chx-bar chx-bar-1" pathLength="100" d="…"/>
<path class="chx-bar chx-bar-2" pathLength="100" d="…"/>
</svg>
</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 |
|---|---|---|
--chx-repeat |
infinite |
1 : l'icône se dessine une fois et reste affichée. |
--chx-play |
running |
paused : l'icône attend, vide, jusqu'au retour à running. |
--chx-speed |
2.4s |
Durée d'un cycle ; le tracé occupe à peu près la première moitié. |
--chx-ok et --chx-ko |
#10b981 et #ef4444 |
Couleurs de la coche et de la croix (cercle compris). |
--chx-size et --chx-gap |
60px et 30px |
Taille de chaque icône et espace entre les deux. |
--chx-bg et --chx-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale du cadre ; transparent et 0 dans un champ ou une liste. |
FAQ
display: none). Chaque icône a ses propres animations et fonctionne seule.--chx-repeat: 1, masquez l'icône puis réaffichez-la : icone.style.display = 'none'; icone.getBoundingClientRect(); icone.style.display = '';. Le navigateur redémarre alors l'animation depuis le début.pathLength="100". Un trait classé chx-tick se dessine après le cercle ; chx-bar-1 puis chx-bar-2 donnent deux traits successifs.
