JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="content">
  <header class="header">
    <h1 class="title">Preloader</h1>
  </header>
  <div class="loader-wrapper">
    <div class="loader"></div>
    
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
  </div>
 <div class="content">
   <h2 style="color:#fff;">Headline of the page</h2>
   <p style="color:#fff;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit porro ipsa dolorum sequi ducimus necessitatibus mollitia. Voluptas perspiciatis soluta est, tenetur quia, optio minus totam tempora consequuntur. Cum, hic, ex.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro mollitia ab iste voluptatibus, iure repellendus totam molestiae molestias soluta fuga similique consectetur unde ratione illo dolor maxime dicta ad vel!</p>
  </div>
  
</div>

CSS

body
{
  background:#000;
}


h1 {
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
  color:#fff;
}
p{
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
  color:#fff;
}



.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.loader-wrapper .loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border: 3px solid transparent;
  border-top-color: #F44336;
  border-radius: 50%;
  z-index: 1001;
  -webkit-animation: spin 1.5s infinite linear;
          animation: spin 1.5s infinite linear;
}
.loader-wrapper .loader:before, .loader-wrapper .loader:after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.loader-wrapper .loader:before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid transparent;
  border-top-color:#F44336;
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}
.loader-wrapper .loader:after {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid transparent;
  border-top-color: #F44336;
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*Section */
.loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #fff9f9;
  z-index: 1000;
}
.loader-section.section-left {
  left: 0;
}
.loader-section.section-right {
  right: 0;
}

/*Finished Loading Styles*/
.loaded .section-left {
 ...

JavaScript

setTimeout(function(){
  $('body').addClass('loaded');
}, 2000);