過去バージョン

progress 要素とは

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

基本構文

<!-- 60% 完了 -->
<progress value="60" max="100">60%</progress>

<!-- 不確定状態（進捗不明だが動いている） -->
<progress max="100">読込中...</progress>

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

属性一覧

値の指定パターン

<!-- 0〜1 のパーセント表記 -->
<progress value="0.6"></progress>     <!-- 60% -->

<!-- 0〜100 -->
<progress value="60" max="100"></progress>

<!-- 任意のスケール: 7/12 個 -->
<progress value="7" max="12"></progress>

<!-- 進捗不明（インディケーター） -->
<progress></progress>

JavaScript で動的に更新

<progress id="bar" value="0" max="100"></progress>
<span id="pct">0%</span>

<script>
const bar = document.getElementById('bar');
const pct = document.getElementById('pct');

let n = 0;
const timer = setInterval(() => {
    n += 5;
    bar.value = n;
    pct.textContent = n + '%';
    if (n >= 100) clearInterval(timer);
}, 200);
</script>

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

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" を持ちます。スクリーンリーダーは「進捗バー」として認識し、現在値とパーセンテージを読み上げます。

<!-- aria-label でラベルを付与すると、何の進捗か明確になる -->
<progress value="60" max="100" aria-label="ダウンロード進捗"></progress>

<!-- ラベル付きで表示する場合 -->
<label for="upload-progress">アップロード:</label>
<progress id="upload-progress" value="35" max="100"></progress>

不確定状態の見せ方

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

<!-- 不確定状態のスタイル例 -->
<style>
progress:not([value])::-webkit-progress-bar {
    background:
        repeating-linear-gradient(45deg, #cce, #cce 10px, #aae 10px, #aae 20px);
    animation: barberpole 2s linear infinite;
}
@keyframes barberpole {
    0%   { background-position: 0 0; }
    100% { background-position: 40px 0; }
}
</style>

<progress>処理中...</progress>

ブラウザサポート

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

FAQ

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

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

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

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

関連

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