Akshay Shrivastav Akshay Shrivastav - 9 months ago 31
jQuery Question

how to make an icon spin with i tag in html5 through css3

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.

Please, can anyone provide a solution to it? Thanks in advance.

Answer Source

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>