JSFiddle - React, Tailwind, and code Playground

by syao_web

HTML

<div class="loading-wrap"></div>

<div id="contents">
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
  <p>ここに内容が表示される</p>
</div>

CSS

.loading-wrap {
  position: fixed;
  height:100vh;
  width:100vw;
  background-color:#555;
  left: 0px;
  top: 0px;
  z-index: 9999;
  width: 100%;
  height: 100%;
}
.loading-anime {
  animation-name: loadinganime;
  animation-timing-function:ease;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes loadinganime {
  from {
    transform: translateX(0);
  }
  30%, 70% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

JavaScript

$(window).on('load', function(){
	$(".loading-wrap").addClass('loading-anime');
});