WTS - Loading spinner

by Paulo Ávila

HTML

<div id="loading">
    <img align="center" id="spinner"...

CSS

#loading {
    margin: 100px auto 0 auto;
    padding: 15px;
    width: 250px;
    font: bold 14pt Arial;
    color: white;
    background-color: rgb(243,166,134);
    border-radius: 5px;
    border: 1px solid rgb(238,136,93);
}

#spinner {
    margin-right: 15px;
}

/*
#spinner {
    margin-right: 15px;
    -webkit-animation: spin! 5s infinite linear;
}

@-webkit-keyframes spin {
 0% { -webkit-transform: rotate(0deg); }
 12.5% { -webkit-transform: rotate(45deg); }
 25% { -webkit-transform: rotate(90deg); }
 37.5% { -webkit-transform: rotate(135deg); }
 50% { -webkit-transform: rotate(180deg); }
 62.5% { -webkit-transform: rotate(225deg); }
 75% { -webkit-transform: rotate(270deg); }
 87.5% { -webkit-transform: rotate(315deg); }
 100% { -webkit-transform: rotate(360deg); }
}
*/

JavaScript

var DURATION = 4000,
    KEY_FRAMES = 8;

var rotateDeg = 0,
    rotateStep = (360 / KEY_FRAMES);

(function interval() {
    $('#spinner').css('-webkit-transform', 'rotate(' + rotateDeg + 'deg)');

    rotateDeg = (rotateDeg === (rotateStep * (KEY_FRAMES - 1)) ? 0 : (rotateDeg + rotateStep));
    console.log(rotateDeg);
    setTimeout(interval, (DURATION / KEY_FRAMES));
})();