JSFiddle - React, Tailwind, and code Playground

HTML

<div id="preloader"></div>
<p>EXEMPLE</p>

CSS

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
     -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}

JavaScript

function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function(){
	var target = document.getElementById('preloader');
  target.style.opacity = '0.5';
	setTimeout(function()	{target.parentNode.removeChild(target);}, 1000);
})