JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<section>
<button id="step1">play</button>
</section>

<div id="preloader" class="rp-preLoader">
    <div id="test" class="rp-rumiShape">
        <div id="testCheck" class="rp-rumiCheck"></div>
    </div>
    <div id="capsule" class="rp-nameCapsule">
        <div class="rp-appName"></div>
    </div>
    <div class="rp-loadingBar">
        <div></div>
    </div>
</div>

CSS

html, body{ margin:0;padding:0;width:100%;height:100%; }

body{
    /*background: url('http://www.texturepalace.com/gallery/stone/0116/stone_texture_big_0116_03_texturepalace.jpg');*/
}

.rp-preLoader{
    background: rgba(43,43,43 ,1);
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    overflow: hidden;
}
section{
    position: fixed;
    z-index: 500;
}
.rp-nameCapsule{
    height: 60px;
    width: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    overflow: hidden;
    transition: 300ms;
}
.rp-nameCapsule.rp-capsuleOpen{
    width: 235px;
}
.rp-appName{
    position: absolute;
    width: 200px;
    height: 60px;
    margin: 0;
    z-index: 500;
    display: block;
    background: url('http://192.168.20.20:8001/static/images/rumi-logo-3.svg') no-repeat center;
    top: 0;
    right: 0;
    overflow: hidden;
    background-size: 140%;
    background-position: -74px -41px;
}
.rp-rumiShape{
    background: #69b32d;
    margin: 0 auto;
    width: 2000px;
    height: 2000px;
    transition: 300ms;
    z-index: 99;
    position: relative;
    left: 0;
    opacity: 0;
    transform: rotate(-315deg);
}
.rp-rumiShape.rp-rumi{
    width: 42px;
    height: 42px;
    transform: rotate(45deg);
    overflow: hidden;
    opacity: 1;
}
.rp-rumiCheck{
    display: block;
    width: 8px;
    height: 29px;
    background: #2B2B2B;
    border-radius: 0 0 6px 6px;
    position: absolute;
    left: 25px;
    opacity: 0;
    transform: scale(4);
    transition: 300ms;
}
.rp-rumiCheck:before {
    content: '';
    display: block;
    width: 8px;
    height: 24px;
    position: absolute;
    left: -6px;
    top: 10px;
    background: #2B2B2B;
    transform: rotate(-45deg);
    border-radius: 5px;
}
.rp-rumiCheck.rp-visibleCheck{
    opacity: 1;
    transform: scale(1);
}
.rp-preLoader.rp-rumiAnimationFix .rp-rumiShape{
    left: -100px;
}
.rp-preLoader.rp-rumiAnimationFix .rp-nameCapsule{
    margin-left:...

JavaScript

(function(doc){

	var	test = doc.getElementById('test'),
    	capsule = doc.getElementById('capsule'),
    	step_1 = doc.getElementById('step1'),
        check = doc.getElementById('testCheck'),
        preLoader = doc.getElementById('preloader');
        
	step_1.onclick = function(){
    
    	test.classList.add('rp-rumi');
        
        setTimeout(function(){
        
        	
            check.classList.add('rp-visibleCheck');
        
        },300);
        
        setTimeout(function(){
       	 	capsule.classList.add('rp-capsuleOpen');
        	preLoader.classList.add('rp-rumiAnimationFix');
        
        },1000);
    
    };
        

})(document);