Timeline Choreography
Six barres qui se remplissent puis se vident pendant qu'un curseur les parcourt, chacune 0,3 s après la précédente : deux animations par barre (largeur et position) qui partagent la même durée de 3 s et le même délai, lues comme un planning d'étapes qui se chevauchent — CSS pur, zéro JavaScript, barres qui s'allument en lumière si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .md-tl-stage (300 px de haut au minimum, fond #0a0a0f) contient .md-timeline (pleine largeur, marge intérieure de 20 px) et six .md-tl-bar écrites dans le HTML : rails de 4 px de haut, coins de 2 px, indigo à 20 % (rgba(99, 102, 241, .2)), espacés de 12 px. Chaque rail porte deux enfants. .md-tl-progress, le remplissage en dégradé indigo vers violet (#6366f1 → #a855f7), joue mdTlFill : largeur de 0 à 100 % à mi-course, puis retour à 0. .md-tl-dot, le curseur, un disque indigo de 8 px posé 2 px au-dessus du rail, joue mdTlDot : left de 0 à calc(100% - 8px), puis retour. Les deux animations durent 3 s en ease-in-out, en boucle.
Toute la chorégraphie tient dans les délais écrits dans le HTML : 0 s, 0,3 s, 0,6 s… 1,5 s, le même pour le remplissage et le curseur d'une barre. Le curseur reste donc collé au bout du remplissage, et chaque barre démarre quand la précédente en est à 10 % de son cycle : on lit des étapes qui se chevauchent, comme un diagramme de Gantt qui s'anime. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 sur une barre de 760 px, 600 ms après le chargement : remplissages de 251, 61, puis 0 px pour les quatre suivantes ; six barres, curseur rond de 8 × 8 px entièrement visible, le rail ne le coupant pas.
Les deux animations portent sur width et left, qui obligent le navigateur à recalculer la mise en page à chaque image : pour six barres, la charge est négligeable ; au-delà de quelques dizaines, préférez transform: scaleX() (voir la FAQ). Tout est écrit dans le HTML, sans script : ce qui s'affiche est ce qu'on colle. Le cadre a sa propre classe, préfixée comme le reste de l'effet : deux effets de la bibliothèque collés sur la même page ne se réécrivent pas.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, plus de remplissage qui court ni de curseur : chaque barre est pleine et s'allume puis s'éteint (mdTlFade, opacité de 0,25 à 1), avec le même décalage de 0,3 s d'une barre à l'autre. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : six remplissages à pleine largeur, curseurs masqués, opacité qui varie. - Sens : l'animation est une boucle décorative ; elle ne donne pas l'avancement réel d'une tâche. Si les barres représentent des étapes réelles, écrivez leur état en texte (« Fondations : terminé », « Charpente : démarre cette semaine ») et, pour un vrai pourcentage, utilisez un élément
progressourole="progressbar"avecaria-valuenow. - Arrêt : la boucle tourne sans fin. Un mouvement de plus de 5 secondes doit pouvoir s'arrêter : figez les barres quand l'opération est finie (
animation: none; width: 100%, comme l'exemple 2), ou proposez un bouton pause. - Contraste : le rail à 20 % d'opacité est volontairement discret ; le remplissage et le curseur indigo mesurent 4,4:1 sur le fond
#0a0a0f.
Compatibilité navigateur
CSS pur (@keyframes sur width et left, calc()), 1,6 Ko de CSS et 1,1 Ko de HTML, zéro JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : six barres, mêmes décalages, même remplacement par l'opacité sous mouvement réduit.
Sans animations CSS, les six rails restent vides avec leur curseur au départ : la structure se voit, pas l'avancement. Si l'affichage sans animation compte, donnez une largeur de départ au remplissage.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="md-tl-stage">
<div class="md-timeline">
<div class="md-tl-bar">
<div class="md-tl-progress" style="animation-delay: 0s;"></div>
<div class="md-tl-dot" style="animation-delay: 0s;"></div>
</div>
… (6 barres, délai + 0,3 s à chaque fois)
</div>
</div>Le code complet HTML + CSS + JS de Timeline Choreography, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Décalage entre barres (HTML — animation-delay) |
0,3 s (0 → 1,5 s), identique pour remplissage et curseur | 0,15 s resserre les étapes (vague rapide) ; 0,6 s les sépare presque. Gardez le même délai sur le remplissage et le curseur d'une barre, sinon le curseur se détache du bout. |
Durée (CSS — 3s sur les deux animations) |
3 s : 1,5 s pour remplir, 1,5 s pour vider | Changez les deux ensemble. 5 s donne un planning posé ; pour une barre qui reste pleine un moment, ajoutez une étape 60% { width: 100% } (et left au bout) dans les deux keyframes. |
Nombre de barres (HTML — .md-tl-bar) |
6 | Ajoutez un bloc rail + remplissage + curseur par étape, en continuant les délais de 0,3 s en 0,3 s. Au-delà de 10, réduisez le décalage pour que la dernière barre ne démarre pas trop tard. |
Épaisseur et curseur (CSS — .md-tl-bar, .md-tl-dot) |
rail de 4 px, curseur de 8 px à top: -2px |
Rail de 6 px : curseur de 12 px à top: -3px, et calc(100% - 12px) au lieu de calc(100% - 8px) dans la keyframe mdTlDot (et dans l'état final), sinon il dépasse de 4 px au bout du rail. Le curseur dépasse du rail par construction : ne remettez pas overflow: hidden sur .md-tl-bar. |
Couleurs (CSS — dégradé de .md-tl-progress) |
#6366f1 → #a855f7 |
Une couleur par barre se pose avec .md-tl-bar:nth-child(2) .md-tl-progress { background: … }, utile pour distinguer des équipes ou des pistes. |
FAQ
animation: none; width: 62%; sur .md-tl-progress, et animation: none; left: calc(62% - 8px); sur le curseur. Ajoutez transition: width .6s, left .6s pour que la barre glisse quand la valeur change. Gardez l'animation sur les étapes qui n'ont pas encore de valeur.width et left se lisent simplement : la barre a vraiment la largeur affichée, et le curseur se place avec un calc(). Le prix est un recalcul de mise en page à chaque image ; pour six barres, il ne se voit pas. Pour un planning de plusieurs dizaines de lignes, donnez au remplissage width: 100%; transform-origin: left et animez transform: scaleX(0) → scaleX(1) ; le curseur se déplace alors avec un conteneur pleine largeur qui porte transform: translateX()..md-timeline et la règle .is-done .md-tl-progress { animation: none; width: 100%; } .is-done .md-tl-dot { animation: none; left: calc(100% - 8px); } : toutes les barres passent pleines, curseur au bout. En retirant la classe, les animations repartent du début, avec leurs délais — c'est ce que fait l'exemple 2.
