JSFiddle - React, Tailwind, and code Playground

by Gerónimo Garcia Sgritta

HTML

<input id="animate" type="button" value="Show dialog!">
<div class="outerwrap loader">
<div class="innercontent"></div>

CSS

.loader {
background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP////////7+/v7+/v7+/v7+/v////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA) !important;        
}

.outerwrap {
    position:absolute;
    top:200px;
    left: 200px;
    width: 20px;
    height: 20px;
    background-color: rgba(0,0,0,0.4);
    background-position: center center;
    background-repeat : no-repeat;    
    border-radius: 8px;
    padding: 8px;
    display:none;
}

.innercontent {
    background-color: red;
    width:100%;
    height:100%;
    border-radius: 8px;
    display:none;
}

JavaScript

$('#animate').toggle(function(){
    $('.outerwrap').addClass('loader')
    $('.outerwrap').fadeIn(200).delay(1000).animate({
        width:'280px',
        height: '280px',
        top: '40px',
        left: '40px'
   }, 700, function(){
        $('.innercontent').fadeIn();
        $('.outerwrap').removeClass('loader');
   }); 
}, function(){
    $('.innercontent').fadeOut(function(){
        $('.outerwrap').animate({
            width:'20px',
            height: '20px',
            top: '200px',
            left: '200px'
        }, 700).fadeOut(50, function(){
            $('body').css('padding-right', '1px').css('padding-right', '0');
        });
    });   
})