Show "loading" animation on button click

Question

I want to do something very simple. I have one button in my page.

<form action="/process" method="POST">
   <input class="btn btn-large btn-primary" type="submit" value='Analyze Topics'>
    </form>

Now what I want is when the user presses this submit button. It shows that "loading" gif animation until it gets the response from server.

But I have been struggling since long time.

How do I implement this?

possible duplicate of [Jquery Ajax Loading image](http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image) — Ravi Gadag, Mar 08 '13 at 06:28
visit: [this link](http://stackoverflow.com/questions/25895916/show-spinner-icon-on-button-while-loading-on-submit), you will get a help — ashanrupasinghe, Jan 26 '17 at 06:10

bipen · Answer 1 · 2016-08-29T13:52:22.920

40

If you are using ajax then (making it as simple as possible)

Add your loading gif image to html and make it hidden (using style in html itself now, you can add it to separate CSS):
```
<img src="path\to\loading\gif" id="img" style="display:none"/ >
```

Show the image when button is clicked and hide it again on success function

$('#buttonID').click(function(){
  $('#img').show(); //<----here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails.

edited Aug 29 '16 at 13:52

answered Mar 08 '13 at 06:30

bipen

36,319
9
49
62

3

You should use the complete callback to hide the image instead of calling it in two places. – kmkemp Apr 22 '15 at 20:45

score 9 · Answer 2 · answered Mar 08 '13 at 06:27

try

$("#btnId").click(function(e){
 e.preventDefault();
 //show loading gif

 $.ajax({
  ...
  success:function(data){
   //remove gif
  },
  error:function(){//remove gif}

 });
});

EDIT: after reading the comments

in case you decide against ajax

$("#btnId").click(function(e){
     e.preventDefault();
     //show loading gif
     $(this).closest('form').submit();
});

score 7 · Answer 3 · answered Mar 08 '13 at 06:53

The best loading and blocking that particular div for ajax call until it succeeded is Blockui

go through this link http://www.malsup.com/jquery/block/#element

example usage:

 <span class="no-display smallLoader"><img src="/images/loader-small.png" /></span>

script

jQuery.ajax(
{   
 url: site_path+"/restaurantlist/addtocart",
 type: "POST",
 success: function (data) {
   jQuery("#id").unblock(); 
},
beforeSend:function (data){
    jQuery("#id").block({ 
    message: jQuery(".smallLoader").html(), 
    css: { 
         border: 'none', 
         backgroundColor: 'none'
    },
    overlayCSS: { backgroundColor: '#afafaf' } 
    });

}
});

hope this helps really it is very interactive.

score 3 · Answer 4 · answered Mar 08 '13 at 06:52

$("#btnId").click(function(e){
      e.preventDefault();
      $.ajax({
        ...
        beforeSend : function(xhr, opts){
            //show loading gif
        },
        success: function(){

        },
        complete : function() {
           //remove loading gif
        }
    });
});

score 0 · Answer 5 · answered May 25 '17 at 09:59

I know this a very much late reply but I saw this query recently And found a working scenario,

OnClick of Submit use the below code:

 $('#Submit').click(function ()
 { $(this).html('<img src="icon-loading.gif" />'); // A GIF Image of Your choice
 return false });

To Stop the Gif use the below code:

$('#Submit').ajaxStop();

score -1 · Answer 6 · answered Mar 18 '14 at 17:33

            //do processing
            $(this).attr("label", $(this).text()).text("loading ....").animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {//processing finalized
                    $(this).text($(this).attr("label")).animate({ disabled: false }, 1000, function () {
                    })
                });
            });

Show "loading" animation on button click

6 Answers6

Linked