Эффекты загрузчика Ajax в jquery / css (т.е. не ajaxload.info) - PullRequest
Новая
       23

Эффекты загрузчика Ajax в jquery / css (т.е. не ajaxload.info)

0 голосов
/ 03 ноября 2010

Кто-нибудь знает какую-нибудь простую библиотеку, которая может генерировать некоторые "загрузочные" эффекты без использования каких-либо изображений?

Причина, по которой я спрашиваю, заключается в том, что я время от времени использую ajaxload.info, но он действительно хорошо работает только на сплошном цвете фона ... с градиентом фона или рисунком, он выглядит плохо ... также раздражает необходимость повторного создания одного для каждого сплошного цвета фона.

Есть что-нибудь, что могло бы сработать?

Не должно быть сложным. Просто несколько анимационных эффектов, чтобы дать обратную связь ..

1 Ответ

0 голосов
/ 03 ноября 2010

если у вас проблемы с градиентами,
просто выберите шаблон загрузчика, который заключен в поле, например: kit / bar / bar2 / bar3 ..

, если вы не хотите работатьс анимированным gif вы можете использовать css3, но тогда он не будет работать в старых браузерах,
, и вы можете играть с некоторыми анимациями jQuery - например, анимация текста «Загрузка ...», смотрите здесь, например: http://james.padolsey.com/javascript/fun-with-jquerys-animate/

[править] на примере Джеймса Падолси, вот бегущая демонстрация объекта для анимации текста данного div, чтобы показать загрузку: http://jsbin.com/ifiki3/edit

BTW '- я быпо-прежнему использовать загрузочный 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>
...