• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

325
Views
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.

about 3 years ago · Santiago Trujillo
2 answers
Answer question

0

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>

about 3 years ago · Santiago Trujillo Report

0

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);
    }
}
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error