I'm attempting to create an animation for a glyphicon-refresh icon that rotates when clicked. I've been trying to achieve this effect using CSS3, but haven't had much success.
Below is the code I've used:
<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>
Here is the CSS I've written:
<style>
.glyphicon-refresh-animate {
animation-name: rotateThis;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes "rotateThis" {
from { transform: scale( 1 ) rotate( 0deg ); }
to { transform: scale( 1 ) rotate( 360deg ); }
}
</style>
This is the JavaScript implementation:
<script type="text/javascript">
$( document ).ready( function() {
$( "#update" ).on( "click", function( e ) {
var $icon = $( this ).find( ".glyphicon glyphicon-refresh" ),
animateClass = "glyphicon-refresh-animate";
$icon.addClass( animateClass );
// setTimeout is to indicate some async operation
window.setTimeout( function() {
$icon.removeClass( animateClass );
}, 2000 );
});
});
</script>
If anyone has suggestions or an alternative method to achieve this animation effect, it would be greatly appreciated.