How to add Pre-Loader in your HTML body?
Let’s start-
Download Link: Download
Installation:-
Linking this before head tag or before body tag but always should keeps it top:
<script type="text/javascript"src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
Then Call this function after jQuery document ready function in your active.js file or what you made for activating your js
$(window).on('load', function() { // makes sure the whole site is loaded $('#status').fadeOut(); // will first fade out the loading animation $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. $('body').delay(350).css({'overflow':'visible'});
Then add this css. If No need to overflow in body then remove overflow from body.
body { overflow: hidden; } /* Preloader */ #preloader { position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:99; /* makes sure it stays on top */ } #status { width:200px; height:200px; position:absolute; left:50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ background-image:url(../img/status.gif); /* path to your loading animation */ background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; /* is width and height divided by two */ }
And Last you add this html markup after body tag but it will place at the top.
<!-- Preloader --> <div id="preloader"> <div id="status"> </div> </div>
Now your website will pre-load. If not working let me know.
Here is a link of some pre-loader gif file
Link: Download