CODEWITHSUNDEEP
javascriptjqueryajaxload
user8729088
user8729088

Reputation:

show loading before load page on click

$("#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

Upvotes: 0

Views: 1438

Answers (1)

Optional
Optional

Reputation: 4517

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.

Upvotes: 1

Related Questions