jquery/css 中的 Ajax 加载器效果（即不是 ajaxload.info）

Question

有谁知道任何简单的库可以在不使用任何图像的情况下生成一些“加载”效果？

我问的原因是我时不时地使用ajaxload.info，但它只在纯色背景上效果很好。如果有背景渐变或图案，它看起来很糟糕...这也很烦人必须为每种纯色背景重新生成一个。

有什么可以工作的吗？

不必很复杂。只是一些动画效果来提供一些反馈..

Answer 1

如果您对渐变有疑问，
只需选择一个限制在一个框中的加载器模板，例如：kit/bar/bar2/bar3..

如果您不想使用动画 gif，您可以使用 css3，但它无法在旧版浏览器上工作，< br>
你可以玩一些 jQuery 动画 - 比如动画文本“正在加载...”，例如：http://james.padolsey.com/javascript/fun-with-jquerys-animate/

[编辑]
以 james padolsey 的示例为例，下面是一个对象的运行演示，用于对给定 div 的文本进行动画处理以显示加载：
http://jsbin.com/ifiki3/edit

顺便说一句' - 我仍然会使用加载jif 用于此任务..

这是一个简单的示例 - 您可以根据需要整理代码，

这里是代码（但我只想转到 jsBin 链接）：

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()});
});

在 HTML 处：

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