Prévenir un élément HTML à partir héritant animation de spin parent

J'ai ajouté un "chargement" spinner à une page Web en utilisant des animations, comme suit:Prévenir un élément HTML à partir héritant animation de spin parent

<style> 

.spinner { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -70px; 
    margin-top: -50px; 
    z-index: 2; 
    width: 120px; 
    height: 120px; 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    animation: spin 2s linear infinite; 
} 

@keyframes spin { 
    0% { 
    transform: rotate(0deg); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 

</style> 

<div class="spinner"></div>

Ce qui est génial. Mais j'aimerais maintenant que le texte "Chargement" soit fixé au centre de la roulette. J'ai essayé de le faire en utilisant le positionnement relatif:

.loader { 
    width: 120px; 
    margin: 0 auto; 
    position: relative; 
    height: auto; 
} 

<div class="spinner"> 
    <div class="loader>LOADING</div> 
</div>

Mais cela hérite de l'animation parent. Voici un fiddle de la chose qui ne va pas.

J'ai essayé d'ajouter ce qui suit à la classe .loader pour essayer de résoudre ce problème:

animation: none !important; 

animation: spin 2s linear infinite reverse;

Ni œuvres.

Est-ce que c'est réparable? Ou est-il préférable d'essayer d'utiliser le positionnement fixe sur le texte plutôt que d'imbriquer les balises div?

Source

2017-05-03 Matt Thrower

peut aussi essayer de le mettre dans un autre récipient et inverser la rotation sur le récipient

.loader { 
 
    width: 120px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    height: auto; 
 
} 
 

 
.spinner { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -70px; 
 
    margin-top: -50px; 
 
    z-index: 2; 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid #3498db; 
 
    animation: spin 2s linear infinite; 
 
} 
 

 
.holder { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    animation: spin 2s linear infinite reverse; 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner"> 
 
    <div class="holder"> 
 
    <div class="loader"> 
 
     LOADING ... 
 
    </div> 
 
    </div> 
 
</div>

Source

2017-05-03 11:18:16

Merci pour ce. Si vous regardez la question d'origine, vous verrez que j'ai essayé d'utiliser l'animation en sens inverse, mais sans un élément supplémentaire "holder" que vous avez utilisé pour le faire fonctionner. Pouvez-vous expliquer pourquoi cela est nécessaire? –

Cela peut fonctionner sans le 'holder', mais vous devrez déplacer le' transformer l'origine' du 'loader' vers le' transformer l'origine' du 'spinner', avec peut être un peu difficile à déterminer mais avec une similitude taille sous-parent titulaire, l'axe de rotation aka «origine transform» est exactement le même que le spinner et il annule facilement le «mouvement». En fin de compte, tout tourne autour de l'origine de la transformation. Mais avec un sous-parent, vous n'aurez plus à vous soucier de positionner le 'loader' –

Essayez ceci,

.loader { 
 
     width: 120px; 
 
     margin: 0 auto; 
 
     position: relative; 
 
     height: auto; 
 
    } 
 
    .holder { 
 
     position: fixed; 
 
     top: 50%; 
 
     left: 50%; 
 
     margin-left: -70px; 
 
     margin-top: -50px; 
 
    } 
 
    .spinner { 
 
     width: 120px; 
 
     height: 120px; 
 
     border: 16px solid #f3f3f3; 
 
     border-radius: 50%; 
 
     border-top: 16px solid #3498db; 
 
     animation: spin 2s linear infinite; 
 
    } 
 
    
 
    @keyframes spin { 
 
     0% { 
 
     transform: rotate(0deg); 
 
     } 
 
     100% { 
 
     transform: rotate(360deg); 
 
     } 
 
    }

<div class="holder"> 
 
     <div class="spinner"> 
 
     </div> 
 
     <div class="loader"> 
 
     LOADING ... 
 
     </div> 
 
    </div>

Source

2017-05-03 11:04:50 Matt

Prévenir un élément HTML à partir héritant animation de spin parent

Répondre

Questions connexes