【JavaScript】プログレスバーに連動して、100%のカウントダウンを表示する。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript でプログレスバーに連動して、0~100%になるカウントダウンを作成してみます。
前回と同様にロードが実行されたら発火する仕掛けですね。

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

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

</html>

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


body {
  margin: 20rem 0 0 0;
}
#percent {
  font-size: 3rem;
  text-align: center;
}
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 = 0;
  // 20msおきにプログレスバーを更新
  intervalId = setInterval("updateProgress()", 20);
}, 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);
  }
}