JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<div id="preloader">
  <div id="blocktop"></div>
  <div id="logo"></div>
  <div id="blockbottom"></div>
</div>

CSS

html {
  overflow: hidden;
}
#preloader {
  width: 100%;
  height: 100%;
}
#logo {
  display:none;
  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 {
  display:none;
  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 {
  display:none;
  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

var angle = Math.atan2($(window).width(), $(window).height());
  console.log(angle);
  $('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)').add('#logo').show();

  /*$("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);