ローディング画面の表示とフェードアウト

2020.4.26

document.addEventListener('DOMContentLoaded', function () {
    var showloading = document.getElementById('loading_wrapper');
    var wrap = document.getElementById('wrap');
    showloading.classList.add('started');
    window.addEventListener('load', function () {
        setTimeout(function () {
            showloading.classList.add('fadeout');
            wrap.classList.remove('show');
            setTimeout(function () {
                showloading.style.display = "none";
                wrap.classList.add('show');
            }, 850);
        }, 3000);
    });
});
<body>
<div id="loading_wrapper">
<!-- ローディング画面用 -->
</div>

<div id="wrap" class="show">
<!-- 通常コンテンツ -->
</div>
</body>
#loading_wrapper {
  background: #fff;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 1000;
}

/* ローディング後にフェードインアニメーションを使うためのスニペット */

.show {
  .fadein {
    opacity: 1;
    transition: opacity 1s ease-in-out;

    &.delay-1 {
      transition-delay: 0.3s;
    }

    &.delay-2 {
      transition-delay: 0.6s;
    }

    &.delay-3 {
      transition-delay: 0.9s;
    }

    &.delay-4 {
      transition-delay: 1.2s;
    }

    &.delay-5 {
      transition-delay: 1.5s;
    }
  }
}

.fadein {
  opacity: 0;
  transition: 0s;
}