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

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

スポンサーリンク

プログレスバー(progres)タグの属性

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

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

プログレスバー(progres)タグの使い方

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

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

これで

0%

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

このプログレスバーにタイマーで進捗状況を表示する処理を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フォールバックコンテンツとは
指定したタグをサポートしていないブラウザで表示された際に描画される値のこと。
0%

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

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

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

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

0%

まとめ

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

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

タイトルとURLをコピーしました