How to show loading icon till website loads ?

I im not sure, i dont work with JS or so really but what i think you migh look for is make an if statement and somehow check if the page is loaded . So if you can put if the page is not loaded, show loading icon which will be the first to load, and after the whole page loads the code, hide or disply none the loading icon.

Typically, this means you're making an ajax call, and it's just a matter of hiding and showing the loading icon. Here is an an example, you have on an ajax form submit

$('#form').submit( function( event ) ) {
  $.ajax({ 
     url: //where is this ajax going,
     data: //attach your data,
     beforeSend: function() {
         $('#loader').show();
     },
     complete: function() {
         $('#loader').hide();
     },
     success: function(data) {
       $('#info').append(data);
       //or redirect
       // or send an email
      // or sign up
     // or anything you want to do with a form submit event
    },
    error: function() {
       alert('Something went wrong');
    }
   });
});

You can of course bind the ajax call to whatever action you want. This is of the jQuery syntax of an ajax call. Ajax has a bunch of these callbacks built in, that get called when certain things happen. That's usually where I like to control a loading icon.