How to add pre-loader in website?

How to add Pre-Loader in your HTML body?
Let’s start-

Download Link: Download

Linking this before head tag or before body tag but always should keeps it top:

<script type="text/javascript"src=""></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.

Then add this css. If No need to overflow in body then remove overflow from body.

body {
overflow: hidden;
/* Preloader */
#preloader {
position: fixed;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
#status {
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 */
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>

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 *