Saturday, August 18, 2012

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-radius10px;
    display:inline-block;
    margin:5px;
}
.loading {
 margin:10px;
 padding:10 20px;
}

JS
drawLoader(3$('.loading'));

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

function blinker(dir){
    //needed for recursive calls
    //knowing in which direction
    if(dir{
        $(this).animate({opacity0.25}800function(){
            blinker.call($(this)!dir);
        })    
     else {
         $(this).animate({opacity1}800function(){
            blinker.call($(this)!dir);
        })     
     }
}