JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="dialog-modal" title="Loading"><center><img style="margin-top:30px" src="http://diy-code.com/486.gif" /></center></div>

CSS

#box1{
    width: 150px;
    height: 150px;
    background-color: red;
    display: inline-block;
}
#box2{
    width: 150px;
    height: 150px;
    background-color: yellow;
    display: inline-block;
}
#box3{
    width: 150px;
    height: 150px;
    background-color: blue;
    display: inline-block;
}
#box4{
    width: 150px;
    height: 150px;
    background-color: orange;
    display: inline-block;
}

JavaScript

var loading = function(){
    docHeight = $(document).height();
    
    $('body').append('<div class="overlay" style="background:#fff;width:100%;height:' + docHeight + 'px;position:fixed;top:0px;left:0px;"></div>');
    
    $( "#dialog-modal" ).dialog({
      height: 150,
      modal: true
    });
};

loading();

setTimeout(function(){
    $("#dialog-modal").html('<p>Loading Complete</p>');
    $('.overlay').remove();
    $("#dialog-modal").dialog('close');
}, 3000);