JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

<div id="container" class="loading">
    <img id="loader-gif" src="http://bukk.it/lesmis.gif" alt="Princess" />
    <section role="main" class="content">
        <h1>Yo, this is some content</h1>
    </section>
</div>

CSS

#container {
    position: relative;
    background: green;
    text-align: center;
}
    #loader-gif {
        display: inline-block;
        max-width: 100%;
        height: auto;
    }
    .content {
        position: relative;                                          /* allows z-index */
        z-index: 0;                                                  /* set to nothing */
        -webkit-transition: z-index 0s, opacity .3s .1s ease-out;    /* transition z-index instantly, opacity over .3s after a .1s delay */
    }
        .loading .content {
            opacity: 0;                                              /* hide it visually */
            z-index: -1;                                             /* prevents it from being selected, it's hiding behind its parent */
        }

JavaScript

// This is vanilla JavaScript that isn't cross browser tested. Will work in modern browsers, but not from IE8 and older.

// Get some elements

var cont = document.getElementById('container'),
    gif  = document.getElementById('loader-gif');

// Execute when the window has loaded

window.onload = function() {

    // Execute when the gif has loaded
    
    imagesLoaded(gif, function(){
    
        // Remove loading class from the container (recommend using body, in which case you'll need to use getElementsByTagName('body')[0] above)
        
        cont.classList.remove('loading');
        
        // You could also add a delay after the image has loaded, like this:
        
        //setTimeout(function(){
            
            //cont.classList.remove('loading');
        //}, 2000); //2 seconds
    });
}

// Here's the jQuery equivalent, which you should use if you're handling form validation on the client-side before sending to server, which I recommend

//$('window').load(function(){

    //$('#loader-gif').imagesLoaded(function(){
    
        //$('body').removeClass('loading');
    //});
//});