JSFiddle - React, Tailwind, and code Playground

by Nandhakumar Udayasuryan

HTML

<div class="icon-repeat">rotate</div>

CSS

.icon-repeat {
    height:70px;
    width:70px;
    background: #333;
    margin: 50px;
    color: #fff;
    text-align: center;
}

JavaScript

function AnimateRotate(angle,repeat) {
    var duration= 1000;
    setTimeout(function() {
        if(repeat && repeat == "infinite") {
            AnimateRotate(angle,repeat);
        } else if ( repeat && repeat > 1) {
            AnimateRotate(angle, repeat-1);
        }
    },duration)    
    var $elem = $('.icon-repeat');

    $({deg: 0}).animate({deg: angle}, {
        duration: duration,
        step: function(now) {
            $elem.css({
                'transform': 'rotate('+ now +'deg)'
            });
        }
    });
}
AnimateRotate(360,"infinite");