JSFiddle - React, Tailwind, and code Playground

by jzhang172

HTML

<body>
      <div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
    </div>
  <div class="content">
    <img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
     <img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
      <img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
       <img src="https://upload.wikimedia.org/wikipedia/en/2/22/Kirby_Wii.png">
       
  </div>
  
</body>

CSS

.loaded{
transition:1s;
}


.content{
  background:gray;
  height:500px;
  width:100%;
  
}

#loader-wrapper{
  position:fixed;
  background:black;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transition:1s;
  
}
.loaded #loader-wrapper{
  opacity:0;
}
.loader-section{
  position:fixed;
  top:0;
  bottom:0;
  background:red;
  z-index:5;
  width:51%;
  transition:1s;
    opacity:1;
  
}
.section-left{
  left:0;
}
.section-right{
  right:0;
}


.loaded .loader-section.section-left{
  opacity:0;
  transform:translateX(-100%);
  transition:1s;
}
.loaded .loader-section.section-right{
    opacity:0;
  transform:translateX(100%);
  transition:1s;
}

JavaScript

$(document).ready(function() {
 
    setTimeout(function(){
        $('body').addClass('loaded');
        $('h1').css('color','#222222');
    }, 500);
 
});