animated Circle

by bartula

HTML

<div class="circle">
    <span class="partners"></span>
</div>

CSS

.circle{
    height:200px;
    width:200px;
    background:#000;
    margin:45px;
    -webkit-border-radius: 200px;
    border-radius: 200px;
}

.partners{
    width:15px;
    height:15px;
    background:#fff;
    display:block;
    position:absolute;
    top:45px;
    left:45px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JavaScript

$(function() {
    var $elie = $(".circle"), degree = 0, timer;
    rotate();
    function rotate() {
        
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },15);
    }
    
    $(".circle").hover(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
});