JSFiddle - React, Tailwind, and code Playground

by zaurmag

HTML

<div class="container">
  <iframe class="iframe" src="https://zaurmag.ru"></iframe>
   <div class="preloader">
     <div class="preloader__loader">
       <img src="http://demo.zaurmag.ru/templates/template_joomla_3/images/loader-sm.gif" alt="" />
     </div>
  </div>
</div>

CSS

html, body {  
  height: 100%;
}

iframe {
  width: 100%;
  height: 100vh;
  border: none;
  position: relative;
  z-index: 1
}

.container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative
}

.preloader {
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease;
  z-index: 2
}

.preloader.is-invisible {
  opacity: 0;
  transition: opacity .2s ease;
}

.preloader.is-hidden {
  display: none
}

.preloader__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

JavaScript

const iframe = document.querySelector('.iframe')
const preloader = document.querySelector('.preloader')

iframe.addEventListener('load', () => {
  preloader.classList.add('is-invisible')
  
  setTimeout(() => {
    preloader.classList.add('is-hidden')
  }, 100)
})