JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="MyController">
  <div class="preloader is-hidden"></div>
  <div class="content is-shown">
  123123123
  </div>
</div>

CSS

.preloader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('http://s018.radikal.ru/i527/1607/3d/2dd8353d01b2.gif') center no-repeat, white;
  opacity: 1;
}

.is-hidden {
  animation: hide 3.5s normal forwards;
}

@keyframes hide {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.is-shown {
  animation: show 5s normal forwards;
}

@keyframes show {
  0% {
    opacity: 0;
    visibility: visible;
  }
  25% {
    opacity: 0;
    visibility: visible;
  }
  50% {
    opacity: 0;
    visibility: visible;
  }
  50% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}