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.

Answers 1

  • 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>


Related Articles