Loading GIF on normal form submit

I don’t know if this is possible because according to my concept it is not.Say I have a form:

<form action="/loadLotsOfRecords" method="get">
<input type="text" name="email" />
<input type="submit />
</form>

Now this form takes at least 10-15 seconds to load because of obviously there are lots of record. I know using AJAX i can make a loading GIF and load the records. But is there a way in which without using AJAX I can simply show a GIF in those 15 seconds when the page is loading. If I use windows.load function it only spins on the next page. What I require is instead of browser loading I want a simultaneous loader on my body. Thanks

Answer

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>