JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <header>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jq.animation.js"></script>
  </header>
  
  <body>
    <div id="preloader">
      <div id="blocktop"></div>
      <div id="logo"></div>
      <div id="blockbottom"></div>
    </div>
  </body>

</html>

CSS

html {
  overflow: hidden;
}
#preloader {
  width: 100%;
  height: 100%;
}
#logo {
  background-image: url('../img/logotest.png');
  width: 300px;
  height: 300px;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  z-index: 1000;
}
#blocktop {
  background-color: #fff4ed;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: -50%;
  z-index: 10;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}
#blockbottom {
  background-color: #ff7f33;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  right: -50%;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}

JavaScript

$(document).ready(function () {

  /*$("button").click(function() */
  setTimeout(function () {

    $("#blocktop").animate({
      left: '-120%',
      opacity: '0'
    },
    800);

    $("#blockbottom").animate({
      right: '-120%',
      opacity: '0'
    },
    800);

    $("#loadline").animate({
      left: '1000',
      top: '0'
    },
    1000);

    $('#logo').fadeOut('700')
  }, 2000);

});