Ajax loader effects in jquery/css (i.e. not ajaxload.info)

Does any know any simple library that can generate some "loading" effects without using any images?

The reason why i'm asking is that i've been using ajaxload.info now and then, but it only really works well on a solid background color.. with a开发者_开发百科 background gradient or pattern, it looks bad... it's also annoying to have to re-generate one for each solid background color.

Anything out there that could work?

Doesn't have to be complicated. Just a few animation effects to give some feedback..

---

if you have problems with the gradients,
just choose a loader template that is confined in a box like: kit/bar/bar2/bar3..

if you don't want to work with an animated gif you can use css3 but then it won't work on older browsers,
and you can play with some jQuery animations - like animating the text "Loading..." look here for example: http://james.padolsey.com/javascript/fun-with-jquerys-animate/

[edit] taking james padolsey's example, here is a running demo of an object to animate a text of a given div to show loading: http://jsbin.com/ifiki3/edit

BTW' - i would still use a loading jif for this task..

this is a quick example - you can tidy the code as you like

here is the code(but i would just go to the jsBin link):

function AnimateText(contSelector)
{

  this.cont = jQuery(contSelector);
  this.isRunning = false;
  this.animText = this.cont.text();
  this.duration = 1000;
  this.cont.hide();
}
AnimateText.prototype.Start = function()
{
  this.cont.show();
  this.isRunning = true;
  this.AnimateText();
}

AnimateText.prototype.Stop = function()
{
  this.cont.hide();
  this.isRunning = false;
}

AnimateText.prototype.AnimateText = function()
{
  if(this.isRunning === false)
  {
    return;
  }
  var animObj = this;
  var len = animObj.animText.length;
  jQuery({count:0}).animate({count:len}, {
      duration: animObj.duration,
    complete: function(){animObj.AnimateText();},
      step: function() {
          animObj.cont.text( animObj.animText.substring(0, Math.round(this.count)) );
      }
  });
}

$(document).ready(function()
{
  var animText = new AnimateText("#Loader");
  animText.Start();
  jQuery("#stopLoading").click(function(){animText.Stop()});
});

at the HTML:

  <div id="Loader">Loading...</div>
  <div id="stopLoading">click me to stop Loading</div>