Animated countdown clockface

by Terry King

HTML

<div id="clockface"><div id="countdown"></div></div>
<button id="start">start</button>

CSS

#clockface{
    position:absolute;
    left:50px;
    top:50px;
    width:30px;
    height:30px;
    background-color:#AAA;
    border-radius:30px;
}
#countdown{
    position:relative;
    left:15px;
    top:0px;
    width:1px;
    height:15px;
    background-color:black;
    transform-origin:0px 15px;
    -webkit-transform-origin:0px 15px;    
}

JavaScript

function countdownClockface(duration,callback){
    $('#countdown').stop().css({rotation:0}).animate(
      {rotation: 360},
      {
        duration: duration,
        easing:'linear',
        step: function(now, fx) {
          $(this).css({"transform": "rotate("+(now)+"deg)"});
        },
          complete:function(){
              if (callback){callback()};
          }
      }
    );
}

$('#start').click(function(){
    countdownClockface(3000,function(){
        console.log("BING");
    })
});