HTML5 プログレスバーの動きを表示するサンプル(progress)

HTML5のプログレスバーの動きを表示するサンプルです。
progress要素(progressタグ)を使用します。

確認環境
・Windows10
・Google Chrome

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

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

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

サンプル：　

コード

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

1行目にprogressタグがあります。progressバーを表示します。
13行目から16行目はボタンを押す毎に値が10ずつ増えていきます。
18行目から21行目はカウントしている値が100を超えたら0にリセットしています。

サンプル：<progress id="progress1" max="100" value=""></progress>
<input type="button" id="button1" value="ボタン1" >

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

	$("#button1").click(function() {	
		num = num + 10;
		if (num <= 100){
			$('#progress1').attr("value",num);
		}

		if (num > 100){
			num = 0;
			$('#progress1').attr("value",num);
		}
	});
});
</script>

progress要素

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