【JavaScript】ロード時にのみローディングを発動する。ページ遷移では発動しない。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript で、ロード時にのみローディングアニメーションが発生し、他のページ遷移ではローディングアニメーションは発生しないように動作を作ってみます。
ググりながらやってみましたが、思ったより良いものが見つからなかったので、無理やり作り込みました。

HTMLです。【JavaScript】ロード時にのみローディングを発動する。ページ遷移では発動しない。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="js-progress_contents" class="progress_contents">
    <div id="js-progress_wrap" class="progress_wrap">
      <div> id="percent"></div>
    </div>
  </div>

  <script> src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】ロード時にのみローディングを発動する。ページ遷移では発動しない。


/* progress */
.progress_contents {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
  transition: 1s;
}
.progress_wrap {
  position: absolute;
  top: 50%;
  z-index: 300;
  width: 100%;
}
#percent {
  margin-top: 1rem;
  font-size: 5rem;
  font-weight: 100;
  text-align: center;
}
#myProgress {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
}
::-webkit-progress-bar {
  background-color: #ddd;
}
::-webkit-progress-value {
  background-color: #000;
}

JavaScriptです。【JavaScript】ロード時にのみローディングを発動する。ページ遷移では発動しない。


// プログレスバー
// プログレスバーの推進値
let progressVal;
// 一定間隔で処理を行うintervalのIDを保持
let intervalId;

// ロードした時に動作・判定
if (window.performance) {
  if (performance.navigation.type === 1) {
    const progress = document.createElement("progress");
    const progressContent = document.createTextNode("0%");
    progress.appendChild(progressContent);
    progress.setAttribute("id", "myProgress");
    progress.setAttribute("value", "100");
    progress.setAttribute("max", "100");
    const progressWrap = document.getElementById("js-progress_wrap");
    const percent = document.getElementById("percent");
    progressWrap.insertBefore(progress, percent);
    // ロードした時に動く関数
    window.onload = setTimeout(() => {
      progressVal = 0;
      // 20msおきにプログレスバーを更新
      intervalId = setInterval("updateProgress()", 20);
    }, 0);
  } else {
    const progressWrap = document.getElementById("js-progress_contents");
    progressWrap.style.opacity = "0";
    progressWrap.style.zIndex = "0";
  }
}

// プログレスバーを更新
function updateProgress() {
  progressVal += 1;
  document.getElementById("myProgress").value = progressVal;
  document.getElementById("myProgress").innerText = progressVal + "%";
  console.log("progress:", progressVal, "%");
  // 数値を表示するIDを取得
  const percent = document.getElementById("percent");
  percent.textContent = `${progressVal} %`;

  // 最大値まで達したら終了
  if (progressVal == 100) {
    clearInterval(intervalId);
    const progressWrap = document.getElementById("js-progress_contents");
    progressWrap.style.opacity = "0";
    progressWrap.style.zIndex = "0";
  }
}