Bonsoir,
en suivant le tuto "loaders animés" publié récemment, ce code-ci ne fonctionne pas dans une appli sous cordova :
span.myLoader {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
position: relative;
}
span.loaderBars:before,
span.loaderBars span,
span.loaderBars:after {
content: '';
position: absolute;
left: 0; top: 0;
width: 10px; height: 30px;
background-color: #000000;
animation: growLoader 1s linear infinite;
-webkit-animation: growLoader 1s linear infinite;
}
span.loaderBars:before {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
span.loaderBars span {
left: 30px;
animation-delay: -.33s;
-webkit-animation-delay: -.33s;
}
span.loaderBars:after {
left: 15px;
animation-delay: -.66s;
-webkit-animation-delay: -.66s;
}
@keyframes growLoader {
0% {transform: scaleY(0); -webkit-transform: scaleY(0); opacity: 0;}
50% {transform: scaleY(1); -webkit-transform: scaleY(1); opacity: 1;}
100% {transform: scaleY(0); -webkit-transform: scaleY(0); opacity: 0;}
}
@-webkit-keyframes growLoader {
0% {transform: scaleY(0); -webkit-transform: scaleY(0); opacity: 0;}
50% {transform: scaleY(1); -webkit-transform: scaleY(1); opacity: 1;}
100% {transform: scaleY(0); -webkit-transform: scaleY(0); opacity: 0;}
}
(c'est le loader style facebook avec les barres)
ce code-ci :
<p><span class="myLoader loaderBars"><span></span></span></p>
censé me donner trois barres animées, donne deux barres fixes dans une app html5 avec cordova... il y a un truc à modifier pour android ?
si je teste ce code-ci par exemple : http://jsfiddle.net/Kj9fn/ la barre rouge est invisible
J'ai l'impression que sur d'anciennes versions de Webkit, on ne peut pas animer les pseudo éléments. La solution serait peut-être d'utiliser plusieurs spans. J'avais un problème avec le premier loader animé que j'ai pu résoudre de cette façon.