＜progress要素＞ - タスクの進捗度

公開日: 2017/02/09

progress要素は、タスクの進捗度を表す要素です。何らかの作業において、作業がどの程度残っているかをユーザーに伝えるために利用します。テストの点数やディスクの残り容量など、進行状況ではないものを表すのは不適切です。その場合は、meter要素を利用して下さい。

概要

名前

progress

カテゴリー

Flow content

Phrasing content

Palpable content

Labelable element

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。ただし、別のprogress要素の先祖になってはいけない。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLProgressElement

デフォルトのスタイル

progress {
	-webkit-appearance: progress-bar;
	box-sizing: border-box;
	display: inline-block;
	height: 1em;
	width: 10em;
	vertical-align: -0.2em;
	-webkit-writing-mode: horizontal-tb;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-progress-element

属性

max

上限値。省略可能。0より大きい値を指定すること。

value

現在値。省略可能。下限は0で、上限はmax属性値、max属性値を省略している場合は1.0です。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

progress要素は例えばダウンロード状況など、何らかのタスクの進行状況を表現するのに利用します。max属性値で上限値を指定して下さい。max属性を省略した場合、1.0が上限値となります。そして、現在の進行状況を表す数値をvalue属性に指定しましょう。

HTML

<progress max="100" value="80"></progress>

progress要素に対応していません。

progress要素に対応していないブラウザは、プログレスバーを表示できません。代わりに、progress要素のコンテンツが表示されます。非対応のブラウザ向けに、進行状況をテキストで表したものを入れておきましょう。

HTML

<!-- 非対応ブラウザでは80%と表示される -->
<progress max="100" value="80">80%</progress>

value属性を省略した場合、進行中でありながらも、進行状況が不明であることを表現できます。

HTML

<!-- 進行状況が不明 -->
<progress max="100">ビジーかも…</progress>

progress要素に対応していません。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜progress要素＞ - タスクの進捗度</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/progress/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>progress要素は、タスクの進行状況を表す要素です。</p>

<h2>ダウンロード中 (80%完了)</h2>
<p><progress max="100" value="80">80%</progress></p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/661/"> <meta charset="utf-8"> <title>【デモ】＜progress要素＞ - タスクの進捗度</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/progress/"> </head> <body>

<p>progress要素は、タスクの進行状況を表す要素です。</p> <h2>ダウンロード中 (80%完了)</h2> <p><progress max="100" value="80">80%</progress></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>