HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" id="btn-submit" class="btn btn-info">Submit</button>

  <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loader" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" style="width:50px;padding-top: 15%;">
      <div class="modal-content text-center">
        <img src="https://i.gifer.com/ZZ5H.gif" />    
      </div>
    </div>
  </div>

jQuery

$(function() {
      $('#btn-submit').click(function() {
        $('#loadingModal').modal('show');
      });
    });

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 >

乔纳森出色的解决方案在IE8中中断(动画根本不显示)。要解决这个问题，将CSS更改为:

.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;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};

出于对其他文章的尊重，这里有一个非常简单的解决方案，使用CSS3和jQuery，不使用任何进一步的外部资源或文件。

$('#submit').click(function(){ $(this).addClass('button_loader').attr("value",""); window.setTimeout(function(){ $('#submit').removeClass('button_loader').attr("value","\u2713"); $('#submit').prop('disabled', true); }, 3000); }); #submit:focus{ outline:none; outline-offset: none; } .button { display: inline-block; padding: 6px 12px; margin: 20px 8px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-image: none; border: 2px solid transparent; border-radius: 5px; color: #000; background-color: #b2b2b2; border-color: #969696; } .button_loader { background-color: transparent; border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #969696; border-bottom: 4px solid #969696; width: 35px; height: 35px; -webkit-animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 99% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 99% { transform: rotate(360deg); } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="submit" class="button" type="submit" value="Submit" />

注意，当使用ASP。Net MVC，使用(Ajax.BeginForm(…，设置ajaxStart将不起作用。

使用AjaxOptions来解决这个问题:

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

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();
});