加載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' 
    }) 
});