HTML5で進捗状況を表示する「プログレスバー（progress）」タグの使い方

よくWEBページなどでファイルをダウンロードしたり、何かの処理を待っている間に表示される「プログレスバー」ですが、HTML5では「progress」タグを利用することで簡単に実現できます。

プログレスバー（progres）タグの属性
プログレスバー（progres）タグの使い方
属性を指定しないプログレスバー（progres）タグ
まとめ

プログレスバー（progres）タグの属性

HTML5のプログレスバー（progres）タグですが、属性には以下のものがあります。

属性		値
value	現時点の進捗状況	数値	0以上～ max属性値以下（浮動小数点数）
max	全体の作業量	数値	0より大きい値（浮動小数点数、初期値は 1）

プログレスバー（progres）タグの使い方

プログレスバー（progres）タグの使い方は上記の属性を指定して利用します。

    <progress value="0" max="100">0%</progress>

これで

のようにプログレスバーが表示されます。

このプログレスバーにタイマーで進捗状況を表示する処理をJavascriptで書けばよいと言うことで実装すると

<!DOCTYPE html>
    <head>
        <script>
            var progresValue ;
            var intervalID ;

            // プログレスバー表示開始
            function startProgress( ProgresID ){
                progresValue = 0;
                intervalID = setInterval( updateProgress, 50, ProgresID ) ; // 50msごとのプログレスバー更新タイマー
            }

            // プログレスバーを更新する
            function updateProgress( ProgresID, ButtonName ){
                progresValue += 1 ;        // プログレスバーの進捗値を更新
                document.getElementById( ProgresID ).value = progresValue;
                document.getElementById( ProgresID ).innerText = progresValue + "%" ;//HTMLフォールバックコンテンツ設定

                // 最大値まで達したらタイマーを解除
                if( progresValue == 100 ){
                    clearInterval( intervalID ) ;
                }
            }
        </script>
    </head>
    <body>
        <progress id="ProgressBar" value="0" max="100">0%</progress>
        <br><input type="button" onClick="javascript:startProgress( 'ProgressBar' );" id="startButton" value="開始！！" />
    </body>
</html>

これで「開始！！」ボタンを押せば50msごとにプログレスバーの進捗が更新されて行きます。

HTMLフォールバックコンテンツとは
指定したタグをサポートしていないブラウザで表示された際に描画される値のこと。

属性を指定しないプログレスバー（progres）タグ

以下のようにプログレスバー（progres）タグの属性をしていしないで生成すると

<progress id="ProgressBar1">0%</progress>

進捗が左右に動くプログレスバーが作成されます。

まとめ

HTML5のプログレスバー（progres）タグを利用すると簡単にユーザーに処理の進捗を視覚的に示すことができます。

以上、HTML5で進捗状況を表示する「プログレスバー（progress）」タグの使い方でした。