CSS3 Loader

HTML

<script src="https://rawgithub.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.js"></script>
<script src="https://rawgithub.com/jQueryKeyframes/Keyframes.Pathfinder/master/keyframes.pathfinder.js"></script>
<script src="https://rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="clock-container">
    <div class="clock-spark spark-blue"></div>
    <div class="clock-spark spark-red"></div>
    <div class="clock-spark spark-yellow"></div>
    <div class="clock-spark spark-green"></div>
    <div class="clock-cover" title="Loading as fast as I can!"></div>
</div>

CSS

.clock-container{
    width: 140px;
    height: 140px;
    padding: 10px;
    position: relative;
}
.clock-cover{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 0 20px #aaa;
    position: relative;
    z-index: 1;
}
.clock-spark{
    width: 4px;
    height: 4px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 50%;
}
.spark-blue{
    background-color: blue;
    box-shadow: 0 0 3px 3px blue;
}
.spark-red{
    background-color: red;
    box-shadow: 0 0 3px 3px red;
}
.spark-yellow{
    background-color: yellow;
    box-shadow: 0 0 3px 3px yellow;
}
.spark-green{
    background-color: green;
    box-shadow: 0 0 3px 3px green;
}

JavaScript

var rules = $.keyframe.circlePath( { name: 'circular' }, [8, 8], 10),
random = function(min,max){
    return Math.floor(Math.random() * (max - min) + min);   
}

$.keyframe.define([rules]);

$(window).load(function(){
  
    $('.clock-spark').each(function(index, elem){
        $(elem).playKeyframe('circular ' + random(1000,3000) + 'ms linear 0s infinite');
    });
    
});