加载JQuery效果/动画

Question

我正在寻找一个非常简单的效果，让用户知道一些背景ajax正在等待。

我正在考虑简单地有“加载”，后面跟着三个点，直到ajax完成动画。

即

1: Loading 
2: Loading. 
3: Loading.. 
4: Loading... 

重复

是否JQuery的任何本地方法，使这项工作？

Answer 1

有许多（阿贾克斯）装载机/微调下都能用jquery和vanila javascript动画，但本人来说我更喜欢纯html/css纺纱 （有时他们需要一点点额外的HTML或特殊的HTML）

但也有纯css微调动画像Single Element CSS Spinners其中只使用一个单一的元素（天才！）

纯html/css动画有优势没有JavaScript工作的加载，甚至启动在浏览器中，加上他们是更高性能比纯粹javascript动画（至少大部分时间，也就是）。

Answer 2

，如果你需要的财产以后所有的浏览器

找到这个工作fiddel兼容：https://jsfiddle.net/oxkzzrwe/ 这个插件应该使用像这样：

$("#randomArea").Loadingdotdotdot({ 
    "speed": 400, 
    "maxDots": 4, 
    "word": "Loading" 
}); 

也找到ajaxprefilter本地方法做每一个阿贾克斯请求之前的任何事情

Answer 3

我同意abo的答案有很多伟大的CSS微调解决方案，所以使用这些。我个人：内触发AJAX调用的事件的功能，只需使用

$('.spinner').show(); 

然后在AJAX成功回调

$('.spinner').hide(); 

与此类似，只是举例：

（我假设你知道如何使用AJAX，你可以研究如何制作一个CSS微调器。有很多资源和插件可用。）

$('.ajax-trigger').click(function() { 
    $('.spinner').show(); 
    $.ajax({ 
     url: 'http://test.blah.com/test.php', 
     data: { 
      format: 'json' 
     }, 
     error: function() { 
      $('.spinner').hide(); 
      $('#info').html('<p>An error has occurred</p>'); 
     }, 
     dataType: 'json', 
     success: function(data) { 
      $('.spinner').hide(); 
      $('#info').html('<p>Success</p>'); 
     }, 
     type: 'GET' 
    }) 
});