Countdown Timer
Compte à rebours en cartes qui basculent, jusqu'à une vraie date de fin : il s'arrête à zéro, affiche « Terminé » et prévient votre code.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque chiffre est une carte .cdt-card coupée en deux moitiés ; quand la valeur change, la moitié haute pivote de 90° en 0,3 s (cdt-flip-top) avant que le nouveau nombre ne s'inscrive. Les unités affichées sont celles des cartes présentes dans le HTML, repérées par data-cdt-unit : d (jours), h, m, s. La plus grande unité garde le reste : sans carte « jours », 26 heures s'affichent 26:00:00.
La fin se règle avec data-cdt-end, une date ISO (2026-12-31T20:00:00+01:00 ; sans fuseau, c'est l'heure locale du visiteur). Sans cet attribut, le compte part de la durée écrite dans les cartes au chargement de la page (12:34:56 par défaut). Le temps restant est recalculé à partir de l'horloge à chaque seconde : un onglet resté en arrière-plan ne prend pas de retard.
À zéro, le compte s'arrête sur 00:00:00. La racine reçoit la classe cdt-done, les deux-points cessent de clignoter, le texte de data-cdt-done s'affiche sous les cartes et l'événement cdt-done est envoyé sur la racine. root.fx0738.setEnd(date) relance le compte vers une autre fin (objet Date, nombre de millisecondes ou texte ISO). Chaque racine a son propre minuteur.
Accessibilité
- Temps lisible, jamais bavard : les cartes sont masquées aux lecteurs d'écran (
aria-hidden), un texte cachérole="timer"donne « 12 heures 34 minutes 56 secondes ». Le rôle timer n'est pas annoncé de lui-même : on le lit quand on veut, sans annonce chaque seconde. - Fin annoncée une fois : le message de
data-cdt-doneest écrit dans une zonerole="status", lue poliment une seule fois. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les chiffres changent sans bascule et les deux-points restent fixes ; le décompte continue normalement. - Pas un chronomètre légal : l'heure vient de l'ordinateur du visiteur. Pour une échéance qui compte (fin d'enchère, clôture d'inscriptions), c'est votre serveur qui fait foi ; le compte à rebours n'est qu'un affichage.
Compatibilité navigateur
JavaScript sans dépendance (Date.parse, setTimeout, CustomEvent, padStart) et une animation CSS en 3D légère (perspective, rotateX). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies (durée du HTML et vraie date de fin), code collé deux fois, arrêt à zéro avec l'événement, setEnd à 26 h, 390 px, mouvement réduit, page anglaise, aucun nom ajouté sur window, 0 erreur. Le WebKit de Playwright aplatit les effets 3D : la bascule n'a pas été vérifiée à l'œil dans Safari.
Sans JavaScript, les cartes affichent la valeur écrite dans le HTML, immobile. Une date data-cdt-end mal écrite est ignorée : le compte part alors de la durée des cartes.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0738-root" data-cdt-end="2026-12-31T20:00:00+01:00" data-cdt-done="Terminé">
<div class="cdt-board" aria-hidden="true">
<div class="cdt-unit">
<div class="cdt-card" data-cdt-unit="h">
<div class="cdt-card-inner"><div class="cdt-front">12</div><div class="cdt-back">12</div></div>
</div>
<span class="cdt-label">Heures</span>
</div>
<span class="cdt-sep">:</span>
<!-- même bloc pour data-cdt-unit="m" et "s" (et "d" en tête pour les jours) -->
</div>
<p class="cdt-sr" role="timer"></p>
<p class="cdt-status" role="status"></p>
</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 |
|---|---|---|
Date de fin (HTML — data-cdt-end) |
absent : durée écrite dans les cartes | Date ISO avec fuseau (2026-12-31T20:00:00+01:00) pour une échéance identique pour tous les visiteurs. |
Unités (HTML — cartes data-cdt-unit) |
h, m, s |
Ajoutez une carte d pour les jours, retirez h pour un chrono minutes:secondes. La plus grande unité garde le reste. |
Message de fin (HTML — data-cdt-done) |
« Terminé » | Texte affiché sous les cartes et annoncé une fois à zéro : « Vente close », « Les inscriptions sont ouvertes »… |
Nouvelle fin (JS — root.fx0738.setEnd(date)) |
— | Relance le compte vers une autre date (Date, millisecondes ou texte ISO), par exemple une fin reçue de votre serveur après le chargement. |
Réagir à la fin (JS — événement cdt-done) |
— | root.addEventListener('cdt-done', …) : afficher un bouton, recharger un prix, passer à la question suivante. |
Taille des cartes (CSS — .cdt-card, .cdt-front) |
60×70px, chiffres 2rem |
Agrandissez ensemble la carte et la taille des chiffres ; les deux moitiés suivent. |
Couleurs (CSS — .cdt-board, .cdt-sep, .cdt-status) |
fond #1a1a2e, deux-points #6366f1, message #a5b4fc |
Teintes de votre charte ; l'état terminé se règle via .cdt-done. |
FAQ
+01:00, Z). Sans fuseau, elle est lue à l'heure locale de chacun : 20 h à Paris et 20 h à Montréal ne tombent pas au même instant. Le calcul utilise l'horloge de l'ordinateur du visiteur ; une horloge déréglée décale l'affichage, pas votre échéance réelle.data-cdt-done et envoie cdt-done. Il ne repart jamais tout seul ; pour relancer, appelez setEnd().min-width de 76 px pour respirer. Pour une attente de plusieurs jours, une carte d se lit mieux.
