fontaweesome有一个加载动画图标，可以直接在你的项目中使用，没有任何额外的数据负担，如果你已经在使用字体awesome。

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

然后是jquery，你可以使用下面的代码来显示隐藏元素。

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(function() {  
    $('#loading').hide();
});

你可以从Ajaxload中抓取一个旋转圈的动图——把它贴在你的网站文件层次结构的某个地方。然后，只需添加一个带有正确代码的HTML元素，并在完成后删除它。这相当简单:

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

然后你只需要在你的AJAX调用中使用这些方法:

$.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

这有一些注意事项:首先，如果你有两个或两个以上的地方可以显示加载图像，你将需要以某种方式跟踪有多少个调用同时运行，只有当它们都完成时才隐藏。这可以使用一个简单的计数器来完成，它应该适用于几乎所有情况。

其次，这只会在成功的AJAX调用中隐藏加载图像。要处理错误状态，需要查看$。Ajax，它比$复杂。负载,美元。Get之类的，但也更加灵活。

我还发现了这样一个问题(挑战)，在DB响应期间通知用户一些“信息”。

我的解决方案可能与这里的略有不同，它是好还是坏?我不知道，这对我来说已经足够了。

$.ajax({ 
    type: 'ajax',
    method: 'post',
    url: '<?php echo base_url()?>skargi/osluga_skarg',
    data: { full_date: full_date, head_title: head_title },
    //async: false,             
    dataType: 'json',
    beforeSend: function() { $body.addClass("loading"); },
    success: function(data) {   
        $body.removeClass("loading");

fontaweesome有一个加载动画图标，可以直接在你的项目中使用，没有任何额外的数据负担，如果你已经在使用字体awesome。

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

然后是jquery，你可以使用下面的代码来显示隐藏元素。

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(function() {  
    $('#loading').hide();
});

根据https://www.w3schools.com/howto/howto_css_loader.asp，这是一个没有JS的2步过程:

1.在你想要旋转器的地方添加这个HTML: <div class="loader"></div>

2.添加下面的CSS来创建实际的旋转器:

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

将此代码放在body标签上

<div class="loader">
<div class="loader-centered">
    <div class="object square-one"></div>
    <div class="object square-two"></div>
    <div class="object square-three"></div>
</div>
</div>
<div class="container">
<div class="jumbotron">
    <h1 id="loading-text">Loading...</h1>
</div>
</div>

并使用这个jquery脚本

<script type="text/javascript">

jQuery(window).load(function() {
//$(".loader-centered").fadeOut();
//in production change 5000 to 400
$(".loader").delay(5000).fadeOut("slow");
$("#loading-text").addClass('text-success').html('page loaded');
});
</script>

在这里查看完整的示例。

http://bootdey.com/snippets/view/page-loader