表单提交loading加载提示效果

转自大神:https://blog.csdn.net/Denglishang/article/details/81283540

页面:这个div与其他内容的div平级

表单提交loading加载提示效果_第1张图片
CSS

.submit_loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    background-color: #000;
    text-align: center;    
    opacity: 0.3;
 }
.loading_show {
    margin-top: 15%;
 }
    
.loading_context {
   margin-top:1%;
   color: #fff;
   font-size:11pt;
   font-family:"微软雅黑";
 }

JS

function Mask() {
    $('#loading').css({ 'display': 'block' });
}
 function UnMask() {
  $('#loading').css({ 'display': 'none' });
 }  

AJAX调用

function CheckBatch() {
     Mask();
     $.ajax({
      url:?????,
      datatype: "json",
      data: { },
      success: function (msg) { UnMask();}
      error: function (msg) {  UnMask();}
     });
}

效果图:

洗头头

表单提交loading加载提示效果_第2张图片

你可能感兴趣的:(表单提交loading加载提示效果)