show loading before load page on click

Question

$("#button").click(function(){
    $(document).ready(function() {
        $('#wrapper').load('page.php');
    });
});
<div id="wrapper"></div>
<div id="button">click me</div>

I want show loading before send (load) page.php after click #button

Answer 1

Here is the jsfiddle script https://jsfiddle.net/1uwopptv/ or inline script assuming this is what you want. You can again hide the loading gif, after request is completed.

 $("#button").click(function(){ $('#img').show(); $('#button').hide(); $(document).ready(function() { $('#wrapper').load('page.php'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"></div> <div id="button">click me</div> <img src="https://loading.io/assets/img/landing/curved-bars.svg" id="img" style="display:none"/ > 

Disclaimer : Image used belongs to site loading.io, as came up in first google search.