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

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

サンプル

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

サンプル:

progress要素

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

コード

上記サンプルのコードです。
30行目にprogressタグがあります。progressバーを表示します。
以下の値を計算をしている箇所はjQueryを使用しています。
・15行目から18行目はボタンを押す毎に値が10ずつ増えていきます。
・21行目から24行目はカウントしている値が100を超えたら0にリセットしています。

<html lang="ja">
<head>
<meta charset="utf-8">
<title>progressのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	//初期は0をセット
	var num = 0;
	$('#pr1').attr("value",num);

	$("#button1").click(function() {	

		//ボタンを押す毎に10ずつ増えていく
		num = num + 10;
		if (num <= 100){
			$('#pr1').attr("value",num);
		}

		//100を超えたら0にリセット
		if (num > 100){
			num = 0;
			$('#pr1').attr("value",num);
		}
	});
});
</script>
</head>
<body >
サンプル:<progress id="pr1" max="100" value=""></progress><br>
<input type="button" id="button1" value="ボタン1" >
<body>
</html>

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 video要素で動画ファイルを再生するサンプル
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)



△上に戻る