HTMLとJavaScriptでプログレスバーの実装（progress）

目次

はじめに

プログレスバーとは、ダウンロードや何らかの処理の進捗を表示するバーのことです。
ゲームのインストール中などによく表示されます。
ここでは、HTMLの標準のprogressタグを使用して、プログレスバーの表示と進捗変更の処理を記載します。

プログレスバー

まずは以下が、プログレスバーのサンプルです。
スタートボタンを押下する事で、プログレスバーが動きます。

0%

上記のサンプルボタンのソースコードは以下です。

<progress id="prg" value="0" max="100"></progress><span id="parsent">0%</span><br />
<input type="button" id="btn" onclick="progressAct()" value="スタート">

<script>
// プログレスバーの進捗値
var val = 0;
// 一定間隔で処理を行うintervalのIDを保持
var intervalID;
// ボタンの状態（0: スタート, 1: ストップ, 2: 100%に到達）
var btnAct = 0;

const progressAct = () => {
  if (btnAct === 2) {
    // リセット
    val = 0;
    document.getElementById("parsent").innerText = `${val}%`;
  }
  if (btnAct === 1) {
    btnAct = 0;
    // ボタン文言変更
    document.getElementById("btn").value = "スタート";
    clearInterval(intervalID)
    return;
  } else {
    btnAct = 1;
    // ボタン文言変更
    document.getElementById("btn").value = "ストップ";
  }
  
  // 50ms毎に実行
  intervalID = setInterval(() => {
    // プログレスバーに反映
    val += 1;
    document.getElementById("prg").value = val;
    // 画面表示に反映
    document.getElementById("parsent").innerText = `${val}%`;

    // 100%で停止
    if (val == 100) {
      clearInterval(intervalID);
      document.getElementById("btn").value = "スタート";
      btnAct = 2;
    }
  }, 50);
}
</script>

progressタグの「value」が現在の進捗なので、JavaScriptでvalueを書き換えて進捗を更新しています