<progress> 作業の進捗状況を示すプログレスバーを表示する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
パルパブル・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 フレージング・コンテンツ。ただし、<progress>を除く
対応ブラウザ caniuseで確認

<progress>タグの説明

<progress>は、ページの読み込みや計算処理といった作業の進捗状況を示すプログレスバーを表示するために使用します。現在進行中の動的な表現が必要な場合に活用できる要素です。この要素の登場によって、今までjQueryやFlashを用いて作成していたプログレスバーが、HTMLだけで表現できるようになったと言えます。

単純に処理結果を表示するだけの場合は<output>、規定範囲の現在測定値を表示する場合は<meter>を用いて下さい。

<progress>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 視覚的な効果として横長のグラフィカルなメーターが表示されます。これはブラウザの既定のスタイルによるものです。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<progress>に指定できる主な属性

value
進行状況を表します。有効な値は0.01.0です。max属性が与えられている場合は上限がその値になります。この属性がない場合、プログレスバーの進捗は不明となり、タスクは処理中であるものの完了までの予想ができない状態となります。
max
作業量の最大値を指定できます。この値は、0.0以上にしなければなりません。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<progress>の使い方とサンプル

このタグを使ったマークアップのサンプルです。一般的にはJavaScriptなどのスクリプトを使って動的に処理させます。

HTML
<progress value="20" max="100">20%</progress>
<progress value="40" max="100">40%</progress>
<progress value="60" max="100">60%</progress>
表示確認
20%
40%
60%

<progress>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する