JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loading">This page is currently loading.. Just a sec please!</div>
<div id="finished">Thanks for waiting, enjoy my website now!</div>
<iframe style="display: none" onload="load()" src="http://www.google.com"></iframe>

CSS

div#loading, div#finished {
    position: absolute;
    width: 100%;  
    height: 25px;
    background-color: #000;
    color: #FFF;
    text-align: center;
    padding-top: 5px;
}

div#finished {
    display: none;    
}

iframe {
    width: 100%;
    height: 100%;
}

JavaScript

function load() {
       //iframe has loaded.
       $('div#loading').delay(1000).slideUp('slow', function() {
            $('div#finished').slideDown('slow').delay('2000').slideUp('slow');
           $('iframe').toggle();
       });
    }