How to show loader when form loading?

Issue

I have a PHP page. The waiting time to submit the form and get response is different each time. It depends on number data I submit.

How can I show loader when this form is submitting and stop after it done?

PS: I found a nice CSS loader: https://projects.lukehaas.me/css-loaders.

Solution

(function($){
  $(function(){
      $('#form').submit(function(event){
            event.preventDefault();
            var loading_image = $('#form_loading_img'),
            data = $(this).serialize(),
            form = $(this);
            loading_image.show();
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: data,
                success:function(){
                     window.location.reload();
                },
                error:function(){
                  alert('Something goes wrong. Please check the form and try again.');
                },
                complete:function(){
                   loading_image.hide();
                }
            });
      });
  });
})(jQuery);
<img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif" id="form_loading_img" style="display:none">
<form action="action.php" id="form" method="post">
     <!--- Your form element ---->
</form>

Answered By - Niladri