How to add pre-loader in website?

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">&nbsp;</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

Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *