「HTML5」progress要素を使用して進捗状況を表示するサンプル

2022年6月28日

環境
Windows 10 Home 64bit
Google Chrome 103.0.5060.53（Official Build）

構文
$('#プログレスバー名’).attr(“value",値);
progress要素について
属性のmaxは完了した時の値です。
属性のvalueに数値を入れるとプログレスバーにその分色がつきます。

使用例

<!DOCTYPE html>
<html>
<head>
</head>
<body>
完了進捗：<progress id="progressA" max="100" value="0">初期値</progress>
<input type="button" id="btnUpdate" value="更新" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
      let num = 0;
      $('#progressA').attr("value",num);

      //更新ボタンをクリックしたら動作
      $("#btnUpdate").click(function() {	
         //値を15増やす
            num = num +15;

        // 100以下の場合は値をvalue値にセット
            if (num <= 100){
                  $('#progressA').attr("value",num);

            }else{
          //100を超えたら0にリセット
                  num = 0;
                  $('#progressA').attr("value",num);
            }
      });
});
</script>

</body>
</html>

結果
「更新」ボタンを押すとプログレスバーに色がついていきます。
毎に15ずつ増えていきます。
値が100を超えたら0にリセットします

HTML5

Posted by arkgame