value属性

progress要素のvalue属性は、どれだけの作業が完了したかを示す数値を指定する属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

<progress value="完了作業数"></progress>

どれだけの作業が完了したかを示す数値を指定する。

max属性を指定しない場合、value属性には、0.0から1.0までの数値を指定する。

max属性を指定する場合、value属性には、0から、max属性に指定したタスクの全作業量を示す数値までの、数値を指定する。

サンプルコード

max属性なし

<progress value="0.5"></progress>

max属性あり

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

サンプル

HTMLソースコード

<p>
	進捗度0.5： 
	<progress value="0.5">0.5</progress>
</p>
<p>
	進捗度0%： 
	<progress value="0" max="100">0%</progress>
</p>
<p>
	進捗度50%： 
	<progress value="50" max="100">50%</progress>
</p>
<p>
	進捗度100%： 
	<progress value="100" max="100">100%</progress>
</p>
<p>
	進捗度5/7： 
	<progress value="5" max="7">5/7</progress>
</p>

実際の表示

進捗度0.5： 0.5

進捗度0%： 0%

進捗度50%： 50%

進捗度100%： 100%

進捗度5/7： 5/7