Loading GIF on normal form submit

You simply need to show you loader gif on successful form submission. In this way, the loading gif appears on the page and keeps displaying until the page is redirected to next page after processing. You don't care about hiding the loading unless you are expecting any error in form submission. You should show this loader, only when form has been successfully submitted.

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#pageloader").fadeIn();
  });//submit
});//document ready

#pageloader
{
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img
{
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="pageloader">
   <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
</form>

• You need to use setTimeout function in java script as it enables your loader to load without other elements in your web page being
  highlighted. Purpose of using AJAX is to load required data behind the scenes, that is the reason why your browser tries to display all the other elements in a the page.

        setTimeout(function(){
          Loader.show();  
              $.ajax({
                  type: "GET",
                   url: "XXXXXXX.htm",
  
                   data: { your_data},
                   success:function(result)
                   {
                       Loader.hide();
                   },
                   complete:function(){
                       Loader.hide();
                   },
                   error:function(){
                       Loader.hide();
                   }
                   });
  
          },1);