JSFiddle - React, Tailwind, and code Playground

by jimmie

HTML

<div id="content"></div>
<div id="loading"></div>
<button id="go">Click me</button>

CSS

#content,
#loading{
    position: absolute;
    top: 0px;
    left: 0px;
}
#content{
    background-color: red;
    width: 300px; 
    height: 300px;
}
#loading{
    width: 0px;
    height: 300px;
    background-color: blue;
}
#go{
    position: absolute;
    top: 320px;
    left: 0px;
}

JavaScript

$("#go").click(function(){
    $("#content").fadeOut(300, function(){
        $("#loading")
            .animate({ width: "300px" }, 600)
            .delay(3000)
            .animate({ width: "0px" }, 600, function(){
                $("#content").fadeIn(300);        
            });
    });
});