概要

画面遷移の際に処理に時間がかかる場合、ボタンの二重クリック防止のローディングの動きを作ってみたときの備忘ログ。

コード

Now Loading...

★

↓ 実際に実行できます。（停止もできます）

CSS

#loading-block-area {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, 0.8);
  /* ↑ここまでで画面全体を覆うちょっと透過した灰色の画面が出来上がる */
  z-index: 90000;
  display: none;
  /* ↑発火するまで非表示 */
}

#loading-block-txt {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* ↑ここまでで画面中央に配置するエリアができる */
  text-align: center;
  z-index: 90001;
  /* ↑灰色の画面より上に配置したいので +1 */
}

.rotate-icon {
  font-size: 25px;
  animation: 3s linear infinite rotation;
}

/* 星を回すアニメーション */
@keyframes rotation {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

HTML

<div id="loading-block-area">
  <div id="loading-block-txt">
    <p>Now Loading...</p>
    <p class="rotate-icon">★</p>
    <button onclick="loadingStop()">ローディングをストップ</button>
  </div>
</div>

<div>
  <button id="loading" onclick="loadingStart()">ローディングを表示</button>
</div>

JS

/* 画面をブロックするエリアを表示する */
function loadingStart(){
  let area = document.getElementById("loading-block-area");
  area.style.display = "block";
}

/* 画面をブロックするエリアを非表示にする */
function loadingStop(){
  let area = document.getElementById("loading-block-area");
  area.style.display = "none";
}

実際に運用する際に気をつけるポイント

リンクが遅くなってすみません。ローカルとサーバーでのHTML表示時の違い - full dictで紹介しましたが、ただ表示しただけだとブラウザバックの際にキャッシュのせいでローディング画面が残ったままになってしまいます。
ですので、ページが読み込まれるたびにローディングを非表示にし、ボタンを押せるようにするスクリプトをあらかじめ仕込んでおくと良いです。
詳しくは html_sample - GitHub をお試しください。

window.addEventListener("pageshow", () => {
  let area = document.getElementById("loading-block-area");
  area.style.display = "none";
  let btn = document.getElementById("loading");
  btn.disabled = false;
})

あとがき

ローディング停止ボタンはサンプルのために作りましたので実際はいらないです。

更新履歴

(2023/01/15) 実際に運用する際に気をつけるポイント追記