JSFiddle - React, Tailwind, and code Playground

by extempl

HTML

<div id="Stage" style="width: 100%; height: 100%;">
  <div id="Loader" style="width: 100%; height: 100%; z-index: 99999; overflow: hidden; background-color: rgb(255, 255, 255);">
    <div class="SiteLoader" style="transform-origin: 32.2% 48.7% 0px; width: 166.8px; height: 210px; left: 50%; margin-left: -83.4px; top: 50%; margin-top: -105px; background-size: 166.8px 210px;">
      <div class="wrapper" style="width: 100%; height: 100%;">
        <div class="LoaderFallbackLayer" style="transform: rotateZ(30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_0.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(-30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_1.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_2.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(-30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_3.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_4.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(-30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_5.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_6.png&quot;);"></div>
        <div class="LoaderFallbackLayer" style="transform: rotateZ(-30deg); background-image: url(&quot;https://la24-prod.s3.amazonaws.com/assets/images/loader/layer_7.png&quot;);"></div>
        <div class="LoaderFallbackLayer"...

CSS

* {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: none;
  outline: none;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -ms-user-select: none;
  touch-action: none;
}

.LoaderFallbackLayer {
  opacity: 0;
  width: 100%;
  height: 100%;
  transform-origin: 32.2% 48.7% 0px;
  background: 50% 50% / contain no-repeat;
}

.wrapper .LoaderFallbackLayer {
  transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

html:hover .wrapper .LoaderFallbackLayer {
  opacity: 1 !important;
  transform: rotateZ(0) !important;
}

html:hover .wrapper .LoaderFallbackLayer:nth-child(1) {transition-delay: 500ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(2) {transition-delay: 1500ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(3) {transition-delay: 2500ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(4) {transition-delay: 3500ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(5) {transition-delay: 4000ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(6) {transition-delay: 4500ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(7) {transition-delay: 5000ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(8) {transition-delay: 5250ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(9) {transition-delay: 5500ms;}
html:hover .wrapper .LoaderFallbackLayer:nth-child(10) {transition-delay: 5750ms;}

html:hover .final, html:hover .wrapper {
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition-delay: 6500ms;
}

html:hover .final {
  opacity: 1 !important;
}