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 ?

4 réponses


YooPlait
Auteur

si je teste ce code-ci par exemple : http://jsfiddle.net/Kj9fn/ la barre rouge est invisible

YooPlait
Auteur

Sur android via cordova ?

YooPlait
Auteur

Personne n'a de solution ? :(

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.