2021-05-12

【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>
  <progress id="myProgress" value="0" max="100">0%</progress>

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

</html>

CSSです。【JavaScript】プログレスバーをロード時に実行する方法。


body {
  margin: 20rem 0 0 0;
}
progress {
  width: 100%;
  height: 2px;
  -webkit-appearance: none;
}
::-webkit-progress-bar {
  background-color: #ddd;
}
::-webkit-progress-value {
  background-color: #000;
}

JavaScriptです。【JavaScript】プログレスバーをロード時に実行する方法。


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

// ロードした時に動く関数
window.onload = setTimeout(() => {
  progressVal = 100;
  // 20msおきにプログレスバーを更新
  intervalId = setInterval("updateProgress()", 20);
}, 0);

// プログレスバーを更新
function updateProgress() {
  progressVal -= 1;
  document.getElementById("myProgress").value = progressVal;
  document.getElementById("myProgress").innerText = progressVal + "%";
  console.log("progress:", progressVal, "%");

  // 最大値まで達したら終了
  if (progressVal == 0) {
    clearInterval(intervalId);
  }
}