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

Question

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

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

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

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

Answer 1

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

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

с помощью примера james padolsey, здесь приведена демоверсия объект для анимации текста данного элемента DIV, чтобы показать загрузки: http://jsbin.com/ifiki3/edit

BTW»- я бы еще использовать загрузочные камеры jПри для решения этой задачи ..

это быстрый пример - вы можете привести в порядок код, как вам нравится

здесь есть код (но я бы просто перейти по ссылке 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>