Loader Spinner Script

by skibulk

HTML

<div id="spinner">
    <div></div>
    <div></div>
    <div class="d"></div>
    <div class="c"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#spinner, #spinner div {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;    
}

#spinner {
    width: 60px;
    height: 60px;
}

#spinner div {
    width: 20px;
    height: 20px;
    float: left;
}

#spinner .a {
    background: #999;
}

#spinner .b {
    background: #BBB;
}

#spinner .c {
    background: #CCC;
}

#spinner .d {
    background: #EEE;
}

JavaScript

var spinner = document.getElementById("spinner");
setInterval(function(){
    spinner.insertBefore(spinner.lastChild, spinner.firstChild);
}, 200);