JavaScriptで簡単に作るプログレスバー

この記事では２種類のプログレスバーを実装する方法について紹介します。

とりあえず下記のデモで動きを確認してください。

now loading…①

now loading…②

CSSアニメーション@keyframesを使う
JavaScriptのsetIntervalメソッドを使う

CSSアニメーション@keyframesを使う

まず、CSSアニメーションを使って実現する方法を説明します。

HTML部分では、プログレスバーを表す要素として<div>要素が配置されています。

<div class="progBar">
<div class="bar" id="progressBar"></div>
</div>

<button onclick="startProgress()">スタート</button>

.progBarクラスは、プログレスバーのコンテナ要素に適用されます。幅は親要素（通常は画面全体）の100%を占め、高さは50ピクセルです。背景色は#ddd（淡い灰色）に指定され、position: relative;により相対的な位置づけが行われます。また、overflow: hidden;により要素の内容がはみ出した場合には切り捨てられるように設定されます。

.progBar .barセレクタは、プログレスバーの表示部分に適用されます。この部分は.progBarの内部で絶対的な位置に配置され、高さは100%で親要素（ローディングバーのコンテナ）に対して伸縮します。背景色は#4CAF50（緑色）に指定されます。

@keyframes progressルールは、プログレスバーのアニメーションを定義します。0%の時点では幅が0%（非表示）であり、100%の時点では幅が100%（完全に表示）になります。アニメーションの進行に従って幅が徐々に変化します。

これらのスタイルによって、プログレスバーが表示され、アニメーションによって幅が徐々に伸びていく効果が実現されます。

.progBar{
		width:100%;
		height:50px;
		background-color:#ddd;
		position:relative;
		overflow: hidden;
}
.progBar .bar{
		position:absolute;
		height:100%;
		background-color: #4CAF50;
}
@keyframes progress {
		0% {width: 0}
		100% {width: 100%}
}

このJavaScriptの関数 startProgress() は、プログレスバーのアニメーションを開始するための処理を行います。

function startProgress() {
    var progressBar = document.getElementById('progressBar');

    progressBar.style.animation = '';

    setTimeout(function() {
        progressBar.style.animation = 'progress 4s normal';
        progressBar.style.animationFillMode = 'forwards';
    }, 0);
}

この関数では、progressBar というIDを持つ要素を取得し、その要素のスタイルを変更してアニメーションを開始します。

以下の手順で処理が行われます。

progressBar を取得します。
progressBar.style.animation の値を空文字列に設定します。これにより、アニメーションを一時停止またはリセットします。
setTimeout() 関数を使用して、0ミリ秒後に関数を実行します。この遅延処理を使用することで、アニメーションの開始が次のレンダリングサイクルで行われるようになります。
遅延処理内の関数では、progressBar.style.animation の値に 'progress 4s normal' を設定します。これにより、4秒間のアニメーションが実行されます。また、progressBar.style.animationFillMode を 'forwards' に設定することで、アニメーションの最終状態を保持します。

以上の処理により、startProgress() 関数が呼び出されると、プログレスバーのアニメーションが開始されます。アニメーションの効果や詳細は、CSSのスタイルとして指定された @keyframes progress の内容に依存します。

JavaScriptのsetIntervalメソッドを使う

もう一つはJavaScriptのsetIntervalメソッドを使って、プログレスバーの幅を徐々に増やしていく方法です。

この方法では、一定の時間間隔で関数を繰り返し呼び出す（このケースではframe関数）ことで、呼び出しごとにプログレスバーの幅を増やします。プログレスバーの幅を手動で計算し、設定する必要があり、clearIntervalを使ってタイマーを停止させる必要があります。

<div id="progBar">
  <div id="bar"></div>
</div>

<button onclick="move()">スタート</button>

#progBar セレクタは、プログレスバーのコンテナ要素に適用されます。幅は親要素（通常は画面全体）の100%を占め、背景色は #ddd（淡い灰色）に指定されます。

#bar セレクタは、プログレスバーの表示部分に適用されます。この部分の幅は初期値として0%となっており、幅はアニメーションやプログラムによって変化します。高さは50ピクセル、背景色は #4CAF50（緑色）に指定されます。

#progBar {
  width: 100%;
  background-color: #ddd;
}

#bar {
  width: 0%;
  height: 50px;
  background-color: #4CAF50;
}

このJavaScriptの関数 move() は、プログレスバーのアニメーションを開始するための処理を行います。

function move() {
  var elem = document.getElementById("bar");   
  var width = 0;
  var increment = 100 / (4000 / 30); 
  var interval = setInterval(frame, 30);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

この関数では、bar というIDを持つ要素を取得し、その要素のスタイルを変更してアニメーションを開始します。

以下の手順で処理が行われます:

elem を取得します。
width を 0 と初期化します。この変数はバーの幅の現在値を保持します。
increment を計算します。4000 ミリ秒（4秒）の間に幅を 100% まで変化させるために必要な増分を計算します。ここでは、1 ミリ秒ごとに幅を増やすための増分を求めています。
setInterval() 関数を使用して、30 ミリ秒ごとに frame() 関数が実行されるように設定します。この関数はアニメーションのフレームごとに実行されます。
frame() 関数では、width が 100 以上になった場合に setInterval() をクリアしてアニメーションを停止します。それ以外の場合は、width に increment を加算し、elem.style.width に変更した幅の値をパーセンテージ形式で設定します。

以上の処理により、move() 関数が呼び出されると、プログレスバーのアニメーションが開始されます。アニメーションは幅が徐々に増えていき、4000 ミリ秒（4秒）後に 100% の幅になります。アニメーションの速度や詳細は、increment の値や setInterval() の間隔に依存します。