JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<!doctype html>
<html lang="pt-BR">
<head>
      <meta charset="utf-8"/>
      <title>PreLoadMe</title>

      <!-- Stylesheet -->
      <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, print"/>
      
</head>

<body>
<!-- Preloader -->
<div id="preloader">
    <div id="status">&nbsp;</div>
</div>

<!-- Your Website Content -->
<div>This is your website content</div>

</body>
</html>

CSS

@charset "utf-8";

/* Preloader */
#preloader {
    position:absolute;
    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('http://rodrigonery.eu5.org/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

$(window).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.
        })