Question

I would like to use a basic, text only, loading indicator. So instead of using an image, I’d like to just show a text:

Loading ...

While some AJAX request is taking place. I would like this text to be changing like this:

Loading ...

Then:

Loading ..

Then:

Loading .

Then:

Loading ..

Then:

Loading ...

And so on. Any ideas? I can use jquery for this.

Answer 1

You could do something like this (adapt to your needs):

<span>loading</span>
<span class="dots"></span>

jQuery

function animateIt() {

 var text = '...';
 jQuery({count:0}).animate({count:text.length}, {
     duration: 2000,
     step: function() {
         $(".dots").text( text.substring(0, Math.round(this.count)) );
     },
     complete: function() {
         animateIt();
     }
  });
}

animateIt();

Here’s an example: http://jsfiddle.net/uZkzX/