jquery在处理时显示微调器

When '.btn-save' is clicked, a server side script(probably php) would connect with the server to upload image or form data to the server. While this process is happening I want a spinner to show.

My HTML for the spinner is:

<div class="spinner">
   <img src="img/loader.gif" alt="Processing" />
</div>

My CSS:

.spinner {
    z-index: 9999;
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
}
.spinner img {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000;
}

I found an answer that suggested doing something like this:

        $body = $("body");

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

The CSS:

body.loading {
    overflow: hidden;   
}

body.loading .spinner {
    display: block;
}

I want to know if this will work for me or if you could suggest something different in my case.

I done similar thing ,

<form id="feedback">
<div class="spinner" id="loader_login" style="display: none;">
<input type="submit" value="submit" >

In your jquery after button click,

$('#feedback').submit(function (event) {
        $("#loader_login").css("display", "block");

       //data process

       $("#loader_login").css("display", "none");
}

In your case, the ajaxStart and ajaxStop functions do not undestand the variable $body, as it is defined outside of them.

You need to use $("body").addClass("loading") inside the ajaxStart function, and similar for removeClass too.

When using an ajax you can simply use this:

$.ajax({
  url:'/sample/url',
  type:'POST',
  //it will fired when the data is currently processing
  beforeSend: function(){ 

   $('body').addClass("loading");
  },
  success: function(){
   $('body').removeClass("loading");
  },
  error: function(){
  }
});