HTML5 進捗状況を表示するサンプル(プログレスバー)

HTML5の進捗状況を表示するサンプルです。
progress要素を使用してプログレスバーの動きを表示します。

確認環境
・Windows10
・Google Chrome

目次

プログレスバー プログレスバーのサンプル
  サンプルのコード
  progress要素

プログレスバーのサンプル

ボタン1を押すとプログレスバーに色がついていきます。
色が全てつくと色をリセットしています。

サンプル: 

サンプルのコード

上記サンプルのコードです。
jQueryを使用しています。

サンプル:<progress id="progress1" max="100" value="0">未対応</progress>
<input type="button" id="button1" value="ボタン" >

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

    // ボタンをクリックしたら以下の処理を実行する
	$("#button1").click(function() {	
        // 値を10増やす
		num = num + 10;

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

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

1行目にprogressタグがあります。progressバーを表示します。
maxが最大値です。
valueに値をセットしていきます。
maxが100でvalueに50を入力するとprogressバーは半分進んだ状態になります。
progress要素に未対応のブラウザの場合はprogressで挟まれた部分の文字が表示されます。

13行目から17行目はボタンを押す毎に値が10ずつ増えていきます。
21,22行目はカウントしている値が100を超えたら0にリセットしています。

attrはjQueryのメソッドです。属性値を設定できます。
jQuery 属性値を取得/設定/削除する(attr/removeAttr)

progress要素

  • HTML5で導入されました。
  • progressタグでくくります。<progress>~</progress>。
  • 属性のvalueに数値を入れるとプログレスバーにその分色がつきます。
  • 属性のmaxは完了したときの値です。
  • 以下はMDNのprogressのリンクです。
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/progress

関連の記事

HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
[HTML5] number 上下ボタンで数値を入力する
[HTML5] detailsとsummary クリックで詳細を開く

△上に戻る