HTML5のプログレスバーコントロールを表示する - HTML

HTML5のプログレスバーを表示するコードを紹介します。

処理進行中を示すプログレスバーの表示

progress タグのvalueに値を設定しない場合、処理進行中を示すプログレスバーになります。

コード

下記コードを記述します。

Progress.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    おまちください<br />
    <progress id="progress1"></progress><br />
</body>
</html>

表示結果

上記のHTMLファイルをInternet Explorer 10で表示すると下図の表示となります。

丸点がアニメーションするプログレスバーが表示されます。

処理の進行を示すゲージ状のプログレスバーの表示

progress タグのvalueに値を設定すると、ゲージ状のプログレスバーの表示となります。

コード

ProgressBar.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function SetProgressBar(value) {
            var pb = document.getElementById("progress1");
            pb.value = value;
        }

        function UpProgressBar() {
            var pb = document.getElementById("progress1");
            pb.value += 5;
        }

        function DownProgressBar() {
            var pb = document.getElementById("progress1");
            pb.value -= 5;
        }
    </script>
</head>
<body>
    <progress id="progress1" value="0" max="100"></progress><br />
    <a href="javaScript:void(0)" onclick="UpProgressBar()">UP</a><br />
    <a href="javaScript:void(0)" onclick="DownProgressBar()">DOWN</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(20)">20%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(40)">40%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(60)">60%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(80)">80%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(100)">100%</a><br />
</body>
</html>

解説

  function SetProgressBar(value) {
    var pb = document.getElementById("progress1");
    pb.value = value;
  }

上記関数は引数に与えた数値をプログレスバーに設定する関数です。

  function UpProgressBar() {
    var pb = document.getElementById("progress1");
    pb.value += 5;
  }

上記関数はプログレスバーのValueを5増やします。

  function DownProgressBar() {
    var pb = document.getElementById("progress1");
    pb.value -= 5;
  }

上記関数はプログレスバーのValueを5減らします。

下記がプログレスバーのゲージを制御するリンクです。プログレスバーの値の増減リンクがクリックされるとJavaScriptのUpProgressBar(),DownProgressBar()関数を呼び出します。プログレスバーの値の設定リンクがクリックされた場合SetProgressBar()関数を呼び出しプログレスバーに値を設定します。

    <a href="javaScript:void(0)" onclick="UpProgressBar()">UP</a><br />
    <a href="javaScript:void(0)" onclick="DownProgressBar()">DOWN</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(20)">20%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(40)">40%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(60)">60%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(80)">80%</a><br />
    <a href="javaScript:void(0)" onclick="SetProgressBar(100)">100%</a><br />