Widely available すべての主要ブラウザで対応済み。安心して使用可能。

概要

<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> の活用

    タスクの進捗状況を表すプログレスバー要素。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。