ローディング画面の実装

<script src="https://cdn.jsdelivr.net/npm/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>

const loading = document.getElementById('loading');

imagesLoaded( '.l-main', { background: ".demo-kv" }, function() {
  const msM = 1000;
  loading.style.transition = 'opacity ' + msM + 'ms';
  
  const loadingOpacity = function(){
     loading.style.opacity = 0;
  }
  const loadingDisplay = function(){
    loading.style.display = "none";
  }
 
  setTimeout(loadingOpacity, 1000);
  setTimeout(loadingDisplay, 1000 + msM);
});

//ローディング部分の回転エフェクト定義
@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

//ローディング画面の背景部分
#loading {
  width: 100vw;
  height: 100vh;
  background-color: #f6f7f8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; }

//ローディング回転部分
#loading-main:after, #loading-main:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin-left: -50%;
  position: absolute;
  top: 40%;
  left: 50%;
  border-radius: 110%; }

#loading-main {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 105; }
  #loading-main:after {
    -webkit-animation: loading 0.75s linear infinite;
    animation: loading 0.75s linear infinite;
    border: 1px solid transparent;
    border-top-color: #666; }
  #loading-main:before {
    border: 1px solid rgba(51, 51, 51, 0.15); }

<div id="loading">
    <div id="loading-main"></div>
</div>