JSFiddle - React, Tailwind, and code Playground

by Viktor H. Morales

HTML

<div class="preloader-wrapper">
    <div class="preloader">
        <div class="ball-scale-ripple"><div><img src="https://pachamamaadventure.com/wp-content/uploads/2018/05/pachamama-logo.png"></div></div>
    </div>
</div>

<ifame src="https://stackoverflow.com" width="500" height="500" style="width:100%;height:500px;"></ifame>
Hola

CSS

body.preloader-site {
    overflow: hidden;
}

.preloader-wrapper {
    height: 100%;
    width: 100%;
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

.preloader-wrapper .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 120px;
}

@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }
  100% {
    opacity: 0.0; } }

.ball-scale-ripple>div {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px solid red;
    -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);
    animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);
}

JavaScript

jQuery(document).ready(function() {
    var Body = jQuery('body');
    Body.addClass('preloader-site');
});
jQuery(window).on('load', function(e) {
$.ready.then(function(){
	alert('ok');
      jQuery('.preloader-wrapper').fadeOut();
    	jQuery('body').removeClass('preloader-site');
   });
});