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