将此代码放在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

jQuery为AJAX请求的开始和结束提供了事件钩子。你可以钩入这些来显示你的加载器。

例如，创建以下div:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

在样式表中将其设置为display: none。你可以用任何你想要的样式。如果你愿意，你可以在Ajaxload.info上生成一个漂亮的加载图像。

然后，你可以使用下面这样的东西来让它在发送Ajax请求时自动显示:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

只需在关闭body标签或任何您认为合适的地方之前，将此Javascript块添加到页面的末尾。

现在，无论何时发送Ajax请求，都会显示#spinner div。当请求完成时，它将再次被隐藏。

SVG动画可能是这个问题的更好解决方案。你不需要担心写CSS和相比gif，你会得到更好的分辨率和alpha透明度。可以使用的一些非常好的SVG加载动画在这里:http://samherbert.net/svg-loaders/

你也可以通过我创建的服务https://svgbox.net/iconset/loaders直接使用这些动画。它允许您自定义填充和直接使用(盗链)是允许的。

要用jQuery完成你想做的事情，你可能应该隐藏一个加载信息元素，并在你想显示加载器时使用.show()。例如，这段代码显示了一秒钟后的加载器:

setTimeout(函数(){ $(" #负载”),告诉(); }, 1000) < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js " > < /脚本> <div id="load" style="display:none"> 请稍等… < img src = " / / s.svgbox.net/loaders.svg ?填补= maroon&ic =困境” 风格= " 24像素宽度:" > < / div >

你可以用不同的方法来做。它可以是页面上的一个小状态，写着“正在加载…”，或者是在加载新数据时，整个元素使页面变灰。下面的方法将向您展示如何实现这两种方法。

设置

让我们从http://ajaxload.info开始一个漂亮的“加载”动画 我会用

让我们创建一个元素，我们可以在任何时候显示/隐藏ajax请求:

<div class="modal"><!-- Place at bottom of page --></div>

CSS

接下来，让我们给它一些天赋:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

最后是jQuery

好了，接下来是jQuery。下一部分其实很简单:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

就是这样!当ajaxStart或ajaxStop事件被触发时，我们将一些事件附加到body元素。当ajax事件开始时，我们将“loading”类添加到主体中。当事件完成时，我们从主体中删除“loading”类。

看到它的行动:http://jsfiddle.net/VpDUG/4952/

我还发现了这样一个问题(挑战)，在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");

这将使按钮消失，然后“加载”的动画将出现在它们的位置，最后只显示成功消息。

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});