<progress>
<progress> 要素はタスクの完了度を表すインジケーターを表示します。value と max 属性で進捗を指定します。
概要
<progress> 要素はタスクの完了度を表すインジケーターを表示します。value と max 属性で進捗を指定します。
対応ブラウザ
デスクトップ
Chrome 6+
Edge 12+
Safari 6+
Firefox 6+
モバイル
Chrome Android 18+
Safari iOS 7+
Firefox Android 6+
基本構文
HTML
<label>ダウンロード進捗:
<progress value="70" max="100">70%</progress>
</label>
<!-- 不確定状態(value なし) -->
<progress>読み込み中...</progress> 実務での使いどころ
-
<progress> の活用
タスクの進捗状況を表すプログレスバー要素。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。