タスクの進行状況を表すには？
progressタグの書式
progressタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
progressタグの属性一覧
| 属性 | 内容 |
| グローバル属性 | ※グローバル属性のページを参照してください。 |
| value | タスク全体のうちの、完了した量を指定します。
「max」属性の値が指定されている場合、指定する値は「max」属性の値以下である必要があります。
「max」属性の値が指定されていない場合、指定する値は1以下である必要があります。 |
| max | タスクの完了までに必要な、全体量を指定します。
指定する値は、0以上である必要があります。 |
| form | <progress>と関連付けるフォームの「id」属性の値を指定します。 |
progressタグの解説
<progress>タグは、タスクの進行状況を表すための要素です。
<progress>が持つ「value」属性と「max」属性を使えば、タスク全体に対してどのくらいの量が完了しているかを表すことができます。
通常、<progress>で示すタスクの進行状況はプログレスバーとして表示されます。
ハードディスクの使用量などのような測定値を表示する目的では、<progress>タグではなく<meter>タグを使用します。
<progress>～</progress>の中には、<progress>をサポートしていないブラウザで表示するメッセージ（代替コンテンツ）を入れることができます。
progressタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<section>
<h1>ファイル処理</h1>
<p>進行状況：<progress id="prog" max="10">処理中...</progress></p>
<script>
var progbar = document.getElementById("prog");
setTimeout(update, 1000);
function update() {
if (progbar.value < progbar.max) {
// (task)
progbar.value++;
setTimeout(update, 1000);
}
}
</script>
</section>
</body>
</html>
progressタグのサンプル画面1
progressタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<section>
<h1>ページ検索</h1>
<p>関連ページを検索しています。</p>
<p>進行状況：<progress max="100">現在、ページを検索中です。</progress></p>
</section>
</body>
</html>
progressタグのサンプル画面2
progressタグの関連項目
