jquery - jquery/css 中的 Ajax 加载器效果(即不是 ajaxload.info)

Question

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

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

有什么可行的方法吗？

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

Answer 1

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

如果您不想使用动画 gif，您可以使用 css3，但它不适用于旧版浏览器，
你可以玩一些 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>