Blog iamvdo.meLe code HTML suivant a été nécessaire, une div contenant 3 autres div.
<div class="chargement">
<div></div>
<div></div>
<div></div>
</div>Puis l’animation CSS est créée avec @keyframes. La fin de l’animation se situe à 70% pour laisser le temps aux autres animations de se terminer.
/* Code sans préfixes */
@keyframes nomAnim {
from{background:#09C;height:36px;margin-top:-8px;}
70%{background:white;height:20px;margin-top:0px;}
to{background:white;height:20px;margin-top:0px;}
}Elle est ensuite appelée sur chaque <div> de la <div class="chargement"> :
.chargement div {
width: 6px;
height: 20px;
background: white;
animation: nomAnim 0.7s infinite linear;
}Par contre, le délai de lancement de l’animation est différent :
.chargement div:first-child{animation-delay:0s;}
.chargement div:nth-child(2){animation-delay:0.1s;}
.chargement div:last-child{animation-delay:0.2s;}
#1par Luky_vj , le 6 juin 2011
Site vraiment tres utile et super ;) Big Up !!
#2par Cliff, le 5 septembre 2011
Je ne sais pas si c’est moi mais vos barres s’affichent en même temps et pas l’une à la suite des autres.
Par contre quand je teste moi même ça marche très bien.
#3par Tsiry, le 30 décembre 2011
Chapeau !
vraiment, c’est super !!
#4par NoNalTrX, le 7 décembre 2012
Super site vraiment très utile. par contre, dans ton tuto il manque juste le float : left pour la classe .chargement div.
Merci beaucoup, très bon site vraiment.
#5par gashka, le 15 août 2013
@Cliff :Je ne sais pas si c’est moi mais vos barres s’affichent en même temps et pas l’une à la suite des autres.
Par contre quand je teste moi même ça marche très bien.
pareil les 2 premieres ensembles puis la troisieme seul