This is my HTML code
<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>
I am using icomoons as for displaying the icons. What I am trying to achieve is whenever a person clicks on this <i class='captcha-refresh icon-spinner9 pointer'></i>
i want it to rotate like as a loader so that we can show that something is processing I have tried many css3 transitions. All those transitions are only being applied to the div
tags and not on i
tags.
Use can easily achieve this using simple CSS keyframes
. I've create a class called icn-spinner
, assuming that it will contain icon. This class has animation called icn-spinner
and will rotate 2 times. You can make it infinite if you want. Just replace 2
with keyword 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>
You can achieve this using javascript/jquery with CSS. Javascript/ Jquery is needed to toggle the class of the 'i' element having the icon. Below is the complete solution.
Here is the HTML code that you provided:
<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>
Jquery code to add the class 'icn-spinner' on click of the element having 'js-spin' class in its class-list. Here for this, you need to import jquery in your project.
$(document).ready(function() {
$('.js-spin').click(function() {
$(this).addClass('icn-spinner') //remove class to stop animation
});
});
Here is the code for CSS styling. Without 'animation-timing-function' the spinner will rotate but it will be not linear. The animation starts at 0deg and ends at 360deg.
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);
}
}