過去バージョン

progress 要素とは

は HTML5 で導入された進捗バー用の要素です。ファイルアップロード、ダウンロード、動画読み込み、ゲームのロード進捗など、「終わりがある作業の進み具合」を視覚化するために使います。

基本構文

60%


読込中...

タグの中身（テキスト）はprogress 非対応ブラウザ向けのフォールバック。対応ブラウザでは表示されません。

属性一覧

値の指定パターン

JavaScript で動的に更新

0%

ファイルアップロードでの利用

const file = document.querySelector('input[type=file]').files[0];
const bar = document.querySelector('progress');

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', e => {
    if (e.lengthComputable) {
        bar.max = e.total;
        bar.value = e.loaded;
    }
});
xhr.open('POST', '/upload');
xhr.send(file);

Fetch API での利用（ReadableStream）

const res = await fetch('/big-file');
const total = Number(res.headers.get('Content-Length'));
const reader = res.body.getReader();

let received = 0;
while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    received += value.length;
    document.querySelector('progress').value = received / total;
}

CSS でデザインを変える

progress 要素はベンダー固有の擬似要素でスタイルを当てます。WebKit 系（Chrome / Safari / Edge）と Firefox で別の擬似要素が必要です。

/* 全体共通 */
progress {
    width: 100%;
    height: 20px;
    appearance: none;
}

/* WebKit: 背景（未完了部分） */
progress::-webkit-progress-bar {
    background: #eee;
    border-radius: 10px;
}

/* WebKit: 進捗（完了部分） */
progress::-webkit-progress-value {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 10px;
}

/* Firefox: 進捗 */
progress::-moz-progress-bar {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    border-radius: 10px;
}

progress と meter の違い

アクセシビリティ

progress 要素は自動的に role="progressbar" を持ちます。スクリーンリーダーは「進捗バー」として認識し、現在値とパーセンテージを読み上げます。

アップロード:

不確定状態の見せ方

value を省略した不確定状態では、ブラウザがアニメーションで「動いていること」を示します。処理時間が読めない場面に最適です。

処理中...

ブラウザサポート

Chrome / Firefox / Safari / Edge いずれも対応済み。IE9 以前は非対応のため、代替表示（テキスト「60%」など）を中身に入れておくとフォールバックされます。

FAQ

Q: 円形プログレスバーにしたい
A: HTML の はバー形状専用。円形は SVG または CSS の conic-gradient で別途実装します。

Q: パーセンテージのテキスト表示も同期したい
A: 単体ではテキストを表示しません。隣に を置いて JavaScript で同期するのが定番。

Q: max を動的に変えてよい？
A: 問題なし。アップロードの全体バイト数が後から判明する場合などで progress.max = total のように更新できます。

Q: スタイルが効かない
A: ブラウザによって擬似要素が違います。WebKit と Firefox の両方を指定し、appearance: none も忘れずに。

関連

• meter 要素 — 範囲内の現在量を表示
• input type="range" — スライダー入力
• output 要素 — 計算結果の表示
• aria-valuenow — ARIA で進捗を示す属性