Saturday, August 18, 2012

blinking loader with javascript

Recently saw a pretty simple ajax-loading image on 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 -

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.

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

.load-circle {
.loading {
 padding:10 20px;


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

function blinker(dir){
    //needed for recursive calls
    //knowing in which direction
     else {