JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div id="preloader">
    <div id="status">&nbsp;</div>
    <a href="#" id="preloaderHider">Leave the loading, I want to see the site!</a>
</div>

CSS

@charset "utf-8";
body {
	overflow: hidden;
}

/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:yellow; /* 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(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/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 */
}

JavaScript

var delay = 3000;

$(window).load(function() { // makes sure the whole site is loaded
    $('#status').delay(delay).fadeOut(); // will first fade out the loading animation
    $('#preloader').delay(delay).fadeOut('slow'); // will fade out the white DIV that covers the website.
    $('body').delay(delay).css({'overflow':'visible'});
});

$('#preloaderHider').click(function() {
    $('#preloader').fadeOut({
        queue: false,
        duration: 'slow'
    });
});