Este es mi código HTML
<div class='form-group col-xs-12 col-sm-5 col-md-5'> <label for='captcha-code'>Captcha Code: </label> <span id='captcha-text'></span> <i class='captcha-refresh icon-spinner9 pointer'></i> </div> Estoy usando icomoons para mostrar los íconos. Lo que estoy tratando de lograr es que cada vez que una persona haga clic en este <i class='captcha-refresh icon-spinner9 pointer'></i> quiero que gire como un cargador para que podamos mostrar que algo se está procesando. he intentado muchas transiciones css3. Todas esas transiciones solo se aplican a las etiquetas div y no a las etiquetas i .
El uso puede lograr esto fácilmente usando keyframes CSS simples. Creé una clase llamada icn-spinner , asumiendo que contendrá un icono. Esta clase tiene una animación llamada icn-spinner y rotará 2 veces. Puedes hacerlo infinito si quieres. Simplemente reemplace 2 con la palabra clave infinite .
$(document).ready(function() { $('.js-spin').click(function() { $(this).addClass('icn-spinner') //remove class to stop animation }); }); i { font-size: 40px; } .icn-spinner { animation: spin-animation 0.5s infinite; display: inline-block; } @keyframes spin-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i class="js-spin"> ♠ Click </i>Puede lograr esto usando javascript/jquery con CSS. Se necesita Javascript/Jquery para alternar la clase del elemento 'i' que tiene el icono. A continuación se muestra la solución completa.
Aquí está el código HTML que proporcionó:
<div class='form-group col-xs-12 col-sm-5 col-md-5'> <label for='captcha-code'>Captcha Code: </label> <span id='captcha-text'></span> <i class='captcha-refresh icon-spinner9 pointer'></i> </div>Código Jquery para agregar la clase 'icn-spinner' al hacer clic en el elemento que tiene la clase 'js-spin' en su lista de clases. Aquí, para esto, necesita importar jquery en su proyecto.
$(document).ready(function() { $('.js-spin').click(function() { $(this).addClass('icn-spinner') //remove class to stop animation }); });Aquí está el código para el estilo CSS. Sin 'animation-timing-function', la ruleta girará pero no será lineal. La animación comienza en 0 grados y termina en 360 grados.
i { font-size: 40px; } .icn-spinner { animation: spin-animation 1s infinite; animation-timing-function: linear; display: inline-block; } @keyframes spin-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }