Implementing a loading spinning wheel in javascript

Question

In my web site I need to pop up a dummy 'loading' spinning wheel when click a button and vanish after some time. It's just a dummy page. I would be much obliged if anyone can explain how to do such a thing. Can I do this with javascript or jQuery?

Thanx in advance

Answer 1

Have a div/image in the right place you need, hide it first time the page loaded. like

<input type="button" id="button"/>
  <div id="load"><img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>

and in your jquery, set a handler for the click event of button to show or hide the div

$(document).ready(function(){
  $('#button').click(function(){
    $('#load').show();
    setTimeout(function() {$('#load').hide()}, 2000);
  });
});

setTimout can be used to hide the div after some time. check the workign example here

Answer 2

you can do it by ajax or simply jquery.

here is the ajax way

$.ajax({
       type: "POST",
       data: serializedDataofthisform,
       dataType: "html",     /*  or json   */
       url: "your url",
       /*  ajax magic here   */
       beforeSend: function() {
      $('#loaderImg').show();    /*showing  a div with spinning image */
        },
       /* after success  */
       success: function(response) {

       /*  simply hide the image */    
       $('#loaderImg').hide();
       /*  your code here   */
      }
     });

html

<div id="loaderImg"><img src="path" alt=""/></div>

Javascript by time out function :- setTimeout()