HTML <progress> 進捗インジケーター要素

試してみましょう

<label for="file">ファイルの進捗:</label>

<progress id="file" max="100" value="70">70%</progress>

label {
  padding-right: 10px;
  font-size: 1rem;
}

属性

この要素にはグローバル属性があります。

max

この属性は、progress 要素で示すタスクで必要とする総作業量を設定します。max 属性を指定する場合は、値を 0 より大きい有効な浮動小数点数値にしなければなりません。既定値は 1 です。

value

この属性は、タスクの進捗状況を設定します。値は 0 から max までの間、または max を省略する場合は 0 から 1 までの間の、有効な浮動小数点数値であることが必要です。value 属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。

アクセシビリティ

ラベル付け

<progress> を使用する場合、ふつうはアクセシビリティのあるラベルを提供しましょう。ARIA 標準のラベル付け属性 aria-labelledby や aria-label を role="progressbar" の要素と同様に使用できますが、<progress> を用いる場合、代わりに <label> 要素を使用することができます。

例

<label>
  文書をアップロード中: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">文書をアップロード中</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>

結果

特定の領域を説明

<progress> 要素がページのある節の読み込みの進捗を表している場合、aria-describedby を使用して状況を指し、更新中の節に aria-busy="true" を設定し、読み込みが完了したら aria-busy 属性を解除してください。

例

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- この領域のコンテンツが読み込み中 -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="コンテンツ読み込み中…"></progress>

結果

例

<progress value="70" max="100">70 %</progress>

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

• 垂直フォームコントロールの作成
• <meter>
• :indeterminate
• -moz-orient
• ::-moz-progress-bar
• ::-webkit-progress-bar
• ::-webkit-progress-value
• ::-webkit-progress-inner-element