blinking loader with javascript

Recently saw a pretty simple ajax-loading image on workopolis.com. It's shown to visitors below the article text while comments are loading. For example you can see it in this article.

Here it is a easy gif file: 

So i decided to do the same with only html and javascript. 
And here is a JSFiddle - http://jsfiddle.net/a7bkU/44/

Actually the parameter in setTimeout call in drawLoader function is a bit tricky - one should play with it a little to customize it to fit a number of blinking circles. In other words, it must be small enough not to make all circles blink at the same time.

HTML
<div class="loading"></div>​

CSS
.load-circle {
    padding:8px;
    background:#666;
    border-radius: 10px;
    display:inline-block;
    margin:5px;
}
.loading {
 margin:10px;
 padding:10 20px;
}
​
JS
drawLoader(3, $('.loading'));

function drawLoader(n, element) {
    //draw loading circles
    for (i=0; i<n; i++) {
        $(element).append('<div class="load-circle" />');
    }
    //for each start a blink action with apropriate time lag
    $.each(jQuery('.load-circle'), function(index, item){
        setTimeout(function(){
            blinker.call(item, true);    
        }, index*400);
    });
}

function blinker(dir){
    //needed for recursive calls
    //knowing in which direction
    if(dir) {
        $(this).animate({opacity: 0.25}, 800, function(){
            blinker.call($(this), !dir);
        })    
     } else {
         $(this).animate({opacity: 1}, 800, function(){
            blinker.call($(this), !dir);
        })     
     }
}