jquery在处理时显示微调器

Question

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.

Answer 1

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