プログレスバーとは

処理がどこまで進んだかを、0 から 100 パーセントまで伸びる横長のバーで示す部品。

概要

ファイルのアップロードやダウンロードなど、処理の進み具合が数値として分かる場合に、 0 パーセントから 100 パーセントまで伸びる横長のバーで進捗を示す部品です。HTML には <progress> という専用の要素があり、value と max を指定するだけで見た目を作れます。あとどれくらいで終わるかが視覚的に分かるのが利点です。

別名

表記ゆれ：進捗バー、プログレスインジケーター、progress bar

「インジケーター」は「示すもの」という意味の英語で、進捗以外の状態表示にも使われる一般的な言葉です。

AI への伝え方

「アップロードの進捗をプログレスバーで見せて」で通じます。進捗の割合が分かる処理なのか（バーが伸びる）、分からない処理なのか（後述のスピナーが向く）を伝えると、部品の選び方がぶれません。

似たパーツとの違い

「ローディングスピナー」は進捗の割合が分からない処理向けで、プログレスバーは割合が分かる処理向けという使い分けです。「ステッパー」は複数の手順のうち今どこにいるかを段階で示す部品で、プログレスバーは連続した割合を示す点が異なります。「スクロールプログレスバー」は記事を読み進めた分量を示す使い方で、プログレスバーの応用のひとつです。

デモ

読み込み中(ボタンで開始)

確定値の表示(70%)

コード

HTML

<div class="progress-bar-demo">
  <div class="progress-bar-demo__example">
    <p class="progress-bar-demo__label">読み込み中(ボタンで開始)</p>
    <button class="progress-bar-demo__start" type="button" data-progress-start>開始する</button>
    <progress class="progress-bar-demo__bar" data-progress-bar value="0" max="100"></progress>
  </div>

  <div class="progress-bar-demo__example">
    <p class="progress-bar-demo__label">確定値の表示(70%)</p>
    <progress class="progress-bar-demo__bar" value="70" max="100"></progress>
  </div>
</div>

CSS

.progress-bar-demo {
  font-family: sans-serif;
}

.progress-bar-demo__example {
  margin-bottom: 24px;
}

.progress-bar-demo__example:last-child {
  margin-bottom: 0;
}

.progress-bar-demo__label {
  margin: 0 0 8px;
  font-size: 13px;
  color: #666;
}

.progress-bar-demo__start {
  display: block;
  margin-bottom: 10px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #0017c1;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.progress-bar-demo__start:disabled {
  background: #b3b3b3;
  cursor: default;
}

.progress-bar-demo__bar {
  display: block;
  width: 100%;
  height: 12px;
  appearance: none;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}

.progress-bar-demo__bar::-webkit-progress-bar {
  background: #e6e6e6;
  border-radius: 6px;
}

.progress-bar-demo__bar::-webkit-progress-value {
  background: #0017c1;
  border-radius: 6px;
  transition: width 0.1s linear;
}

.progress-bar-demo__bar::-moz-progress-bar {
  background: #0017c1;
  border-radius: 6px;
}

const startButton = document.querySelector("[data-progress-start]");
const bar = document.querySelector("[data-progress-bar]");

startButton.addEventListener("click", () => {
  bar.value = 0;
  startButton.disabled = true;

  const timer = setInterval(() => {
    bar.value += 5;
    if (bar.value >= 100) {
      clearInterval(timer);
      startButton.disabled = false;
    }
  }, 100);
});