JQuery : Show “loading” animation ( GIF ) on Button click

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

1- Add your loading gif image to html and make it hidden:

<img src="path\to\loading\gif" id="img" style="display:none"/ >

2- 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 success function isn't called.

did you like how easy it is , Share it with your friends ;)