setInterval()

JavaScriptのsetInterval()でページ上部にプログレスバーを表示

2023年3月18日 4分

プログレスバーは、ユーザーが長い時間を要するタスクの進行状況を視覚的に把握でき、邪魔にもならずユーザーの体験を向上することができます。また、待ち時間のストレスも軽減できます。

今回は、そんなプログレスバーをsetInterval()メソッドを使って作ります。

setInterval()
プログレスバーを表示するサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

setInterval()

JavaScriptの setInterval() は、一定の時間間隔で関数を繰り返し実行するためのメソッドです。

setInterval(関数名, ミリ秒で時間を指定)

最初の引数には繰り返し実行したい関数、2番目の引数には時間間隔（ミリ秒単位）を指定します。

このメソッドは、関数を繰り返し実行し続け、 clearInterval() メソッドが呼び出されるまで停止しません。

setInterval() メソッドは、アニメーションや更新が必要な場合など、定期的に関数を実行する必要がある場合に使用されます。

プログレスバーを表示するサンプル

早速サンプルです。

ページロードを行うと、上部に左から右に進捗によって伸びるプログレスバーが表示されます。

かかかず

少し細めのプログレスバーですが、ページロードで黒い棒が伸びていきます。

実装の手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

はじめに、HTMLを記述します。

コードを表示

<div class="progress-container">
  <div class="progress-bar" id="myBar"></div>
</div>

記述する場所は好みの場所で構いませんが、ページ上部にプログレスバーを表示させる場合構文的にはHTMLの冒頭の方に記述した方が良いです。

JavaScriptを記述

次に、JavaScriptのコードを記述します。

コードは <body>〜</body>の中の</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

window.addEventListener('load', () => { // ページロードで処理開始
  var progressBar = document.getElementById("myBar"); // プログレスバーの要素を取得
  var progressContainer = document.querySelector(".progress-container"); // 親要素を取得
  var width = 1; // widthの指定
  var interval = setInterval(function() { //setIntervalで特定の処理を繰り返す
    if (width >= 100) { // ifで条件分岐
      clearInterval(interval);
      progressContainer.style.display = "none"; // 非表示に
    } else {
      width++;
      progressBar.style.width = width + "%"; // プログレスバーののサイズ可変
    }
  }, 10);
});

CSSを記述

最後にCSSを記述して、見た目を整えます。

コードを表示

.progress-container {
    width: 100%;
    height: 6px;
    background: #f1f1f1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.progress-bar {
  height: 6px;
  background: #313131;
  width: 0%;
}

かかかず

これで完成です。

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは、2つの div タグで、進捗インジケーターを表示するための要素を定義しています。

最初の<div>要素は、進捗インジケーターの親要素を表します。この要素には、CSSで定義されたスタイルを適用するためのクラス名 “progress-container” があります。

2番目の<div>要素は、進捗インジケーターのバーを表します。この要素には、CSSで定義されたスタイルを適用するためのクラス名「progress-bar」があります。この要素には、ID属性「myBar」もあり、JavaScriptでバーの幅を制御するために使用されます。

<div class="progress-container">
  <div class="progress-bar" id="myBar"></div>
</div>

この2つの要素でできているコードで、CSSで定義された進捗インジケーターの要素を作成し、JavaScriptでバーの幅を設定して、ロードの進捗状況を示します。

かかかず

HTMLはシンプルな構成です。

JavaScript

JavaScriptのコードは、ページがロードされた後に進捗バーをアニメーションさせる内容です。

window.addEventListener('load', () => { // ページロードで処理開始
  var progressBar = document.getElementById("myBar"); // プログレスバーの要素を取得
  var progressContainer = document.querySelector(".progress-container"); // 親要素を取得
  var width = 1; // widthの指定
  var interval = setInterval(function() { //setIntervalで特定の処理を繰り返す
    if (width >= 100) { // ifで条件分岐
      clearInterval(interval);
      progressContainer.style.display = "none"; // 非表示に
    } else {
      width++;
      progressBar.style.width = width + "%"; // プログレスバーののサイズ可変
    }
  }, 10);
});

はじめに、window.addEventListener() で、ページが完全にロードされるのを待ってから、 setInterval() メソッドを使って、10ミリ秒（0.01 秒）ごとに進捗バーの幅を増やしていきます。

そして、バーの幅が100％に達すると、 clearInterval() メソッドを使用して、アニメーションを停止し、コンテナー要素を非表示にします。

CSS

CSSは、進捗インジケーターのスタイルを定義しています。

最初のclass名「progress-container」は、進捗インジケーター全体の背景色を設定しています。

次のclass名「progress-bar」は、進捗インジケーターのバーのスタイルを設定しています。ここでは、バーの背景色と幅が設定されています。

.progress-container {
    width: 100%;
    height: 6px;
    background: #f1f1f1;
    position: fixed;
    top: 30px;
    left: 0;
    z-index: 9999;
}

.progress-bar {
  height: 6px;
  background: #313131;
  width: 0%;
}

このコードは、HTMLの進捗インジケーター要素に適用され、JavaScriptによってバーの幅が制御される内容です。

かかかず

CSSもシンプルなので、色味やサイズをいじるのも簡単です。