ローディング画面をネイティブJSで設置しました。

以下のサイト様で紹介されていたコードをアレンジしました。

結果は以下です。カッコよく回転しながら消えるアニメーションを実装しました。

２回目以降はローディングが表示されないようにしています。

See the Pen loading-animation-rotate by hiro (@hirochanpon) on CodePen.

まず参考サイト様からのコードをわたし用にアレンジします。

HTML

<div id="loadingLogo" class="loading-anime-wrap">
  <img class="loading-anime-img" src="https:～/obake.jpg">
</div>

JS

参考サイト様そのままです。ありがとうございます。

const keyName = 'loadingviewed';
const keyValue = true;
window.addEventListener('DOMContentLoaded', () => { // DOMが完全に読み込まれた後に実行
  const loadingLogo = document.getElementById("loadingLogo");
  
  if (!sessionStorage.getItem(keyName)) {
    sessionStorage.setItem(keyName, keyValue);
    
    // 初回表示時にローディングアニメーションを表示
    loadingLogo.classList.add("show");
    // 3.5秒後にローディングアニメーションを非表示
    setTimeout(() => {
      loadingLogo.classList.remove("show");
    }, 3500);
  } else {
    // 2回目以降の処理（特に何も実行しない場合はここを空に）
    // ここに2回目以降の処理を入れることができます
  }
});

CSSです。

CSSのアニメーションはわたし独自の動きです。お使いになられたい場合は、コピーしてもアレンジしてもいいかと思います。

/* CSS for loading animation */
#loadingLogo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #222;
  z-index: 10000;
  display: none;
}
#loadingLogo.show {
  display: block;
  animation: fadein-keyframes 1s ease 2.5s 1 forwards;
}
#loadingLogo .loading-anime-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px; /* 幅を100pxに設定 */
  height: 100px; /* 高さを100pxに設定 */
  transform: translate(-50%, -50%) rotate(0deg);
  animation: coolAnimation 2s ease-in-out infinite;
}
@keyframes coolAnimation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    opacity: 0;
  }
}
body {
  background: #333;
}

以上です、オープニングアニメーションがあるとブログが華やかになりますので、しつこくない程度で実装するといいと思います。

よろしくお願いしますね。コードありがとうございました。