Souscrire
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 @-webkit-keyframes. La fin de l’animation se situe à 70% pour laisser le temps aux autres animations de se terminer.
@-webkit-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 .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 !!