如何在發送ajax請求時顯示進度加載器？

Question

我有一個ajax函數來獲取數據，當響應會同時顯示一個引導進程加載器（圓形加載器）。

如何做到這一點？

的Ajax功能JS：

$('#category_modal').click(function(event) { 
    var url = $(this).data('url'); 
    var cid = $(this).data('id'); 
    $.ajax({ 
     url: '<?=$this->config->base_url()?>admin_panel/update_popup', 
     type: 'post', 
     data: 'id=' + cid 
    }).done(function(data) { 
     jQuery('#categoryModal .modal-content').html(data); 
     $('#categoryModal').modal({ 
     "backdrop" : "static" 
     }); 
    }); 
}); 

Answer 1

https://fortawesome.github.io/Font-Awesome/examples/

動畫圖標可以做的工作。還用CSS：

http://cssload.net/

Answer 2

您可以progress-bar類的jQuery。

$('#category_modal').click(function(event) { 
    /*here append your class to some element 
     $(element).addClass("progress-bar"); 
    */ 
    var url = $(this).data('url'); 
    var cid = $(this).data('id'); 
    $.ajax({ 
     url: '<?=$this->config->base_url()?>admin_panel/update_popup', 
     type: 'post', 
     data: 'id=' + cid 
    }).done(function(data) { 
     /* when u r done remove 
     $(element).removeClass("progress-bar"); 
     /* 
    }); 
}); 

Answer 3

附加功能

beforeSend: function() { 
    // show loader 
} 

在你的Ajax調用