Skip to content

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 />

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



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.

  $("#myform").on("submit", function(){
});//document ready
  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=""></script>

<div id="pageloader">
   <img src="" alt="processing..." />

<form id="myform">
  <input type="text" name="fname" id="fname" value="" />
  <input type="submit" value="Submit" />
User contributions licensed under: CC BY-SA
4 People found this is helpful