JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div id="preloader">
<div id="status"><div class="loader">Loading...</div></div>
</div>

CSS

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f1103a;
    z-index: 10000
}

#status {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -50px;
    font-size: 32px;
    color: #fff
}

JavaScript

(function(d,w) {



function fadeIn( elem, ms ){
  if( ! elem )
    return;

  elem.style.opacity = 0;
  elem.style.filter = "alpha(opacity=0)";
  elem.style.display = "inline-block";
  elem.style.visibility = "visible";

  if( ms )  {
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / ms;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }  else  {
    elem.style.opacity = 1;
    elem.style.filter = "alpha(opacity=1)";
  }
}

function fadeOut( elem, ms ){
  if( ! elem )    return;

  if( ms )  {
    var opacity = 1;
    var timer = setInterval( function() {
      opacity -= 50 / ms;
      if( opacity <= 0 )
      {
        clearInterval(timer);
        opacity = 0;
        elem.style.display = "none";
        elem.style.visibility = "hidden";
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 0;
    elem.style.filter = "alpha(opacity=0)";
    elem.style.display = "none";
    elem.style.visibility = "hidden";
  }
}


function ocultar(){

d.getElementById('preloader').style.transitionDelay = "2s"; 
fadeOut(d.getElementById('status'), 400 );
d.body.style.transitionDelay = "2s";
d.body.style.overflowY = 'visible';
w.addEventListener( "load", function() {
	d.getElementById('preloader').style.transitionDelay = "2s";
  fadeOut( d.getElementById('preloader'), 400 );
  
});
}

function mostrar(){

d.getElementById('preloader').style.transitionDelay = "2s"; 
fadeIn(d.getElementById('status'), 400 );
d.body.style.transitionDelay = "2s";
d.body.style.overflowY = 'visible';
w.addEventListener( "load", function() {
	d.getElementById('preloader').style.transitionDelay = "2s";
  fadeIn( d.getElementById('preloader'), 400 );
  
});
}

var open = w.XMLHttpRequest.prototype.open,
 ...