CSSとJavaScriptで簡単実装！おしゃれなプログレスバーの作り方

Webサイトやアプリケーションで「読み込み中」や「進捗状況」を視覚的に伝えるために使われるのがプログレスバーです。シンプルなものからアニメーション付きのものまで、プログレスバーの実装方法はさまざま。この記事では、HTMLとCSSを使った基本的なプログレスバーの作成から、JavaScriptを組み合わせたインタラクティブな実装まで、わかりやすく解説します。初心者でもすぐに取り入れられるよう、実用的なコード例と共に丁寧に紹介します。

HTMLとCSSで作る基本のプログレスバー

まずは、最もシンプルなプログレスバーを作成してみましょう。HTMLとCSSのみで構築可能です。

<div class="progress-container">
  <div class="progress-bar" style="width: 50%;"></div>
</div>
.progress-container {
  width: 100%;
  height: 20px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.5s ease;
}

このコードで、横に50%まで伸びる緑色のバーが表示されます。style="width: 50%;"の部分を変更すれば、任意の進捗率に対応可能です。

JavaScriptで動的に進捗を更新する方法

次に、JavaScriptを使って動的にプログレスバーを更新してみましょう。例えば、ボタンを押すと進捗が増えていくような仕組みです。

<div class="progress-container">
  <div class="progress-bar" id="myBar"></div>
</div>
<button onclick="move()">進める</button>
let width = 0;
function move() {
  if (width >= 100) return;
  width += 10;
  document.getElementById("myBar").style.width = width + '%';
}

CSSは先ほどと同じでOKです。ボタンを押すたびにバーが10%ずつ進んでいきます。

自動で進むプログレスバーを作る

今度は、JavaScriptのsetIntervalを使って一定間隔で自動的に進むプログレスバーを作ってみましょう。

<div class="progress-container">
  <div class="progress-bar" id="autoBar"></div>
</div>
<button onclick="startProgress()">自動でスタート</button>
function startProgress() {
  let width = 0;
  let elem = document.getElementById("autoBar");
  let interval = setInterval(() => {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }, 50);
}

この例では0.05秒ごとに1%ずつ進むプログレスバーを実現しています。

アニメーション付きプログレスバーで魅せる

CSSのanimationプロパティを使うと、ページ読み込み時にアニメーションで進むおしゃれなバーも作れます。

<div class="progress-animated">
  <div class="progress-fill"></div>
</div>
.progress-animated {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  overflow: hidden;
  border-radius: 10px;
}

.progress-fill {
  height: 100%;
  background-color: #2196f3;
  animation: load 2s ease-out forwards;
}

@keyframes load {
  from { width: 0; }
  to { width: 100%; }
}

これで、ページが読み込まれたときにバーがスッと伸びていく視覚的効果が得られます。

プログレスバーのカスタマイズアイデア

さらにプログレスバーに個性を加えるための工夫を紹介します。

  • 色のグラデーションを使う
  • 高さや角丸の調整でデザイン性を高める
  • 進捗率（%）の数値を表示する
  • 複数バーを並べて比較グラフ風に

例：数値付きバー

<div class="progress-container">
  <div class="progress-bar" id="barWithText"></div>
  <span id="barText">0%</span>
</div>
function updateProgressText(percent) {
  document.getElementById("barWithText").style.width = percent + '%';
  document.getElementById("barText").innerText = percent + '%';
}
updateProgressText(70);

応用編：ファイルアップロード風のバーを再現

プログレスバーはファイルアップロード中のインジケーターとしてもよく使われます。

<input type="file" id="fileInput">
<div class="progress-container">
  <div class="progress-bar" id="uploadBar"></div>
</div>
document.getElementById('fileInput').addEventListener('change', () => {
  let width = 0;
  const bar = document.getElementById("uploadBar");
  const interval = setInterval(() => {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width += 5;
      bar.style.width = width + '%';
    }
  }, 100);
});

実際のアップロード状況を表示するには、サーバー側のAPIとの連携やXMLHttpRequestのonprogressイベントなどが必要になります。

まとめ

プログレスバーは、ユーザーに「進行状況」を視覚的に伝える重要なUIコンポーネントです。HTMLとCSSだけでシンプルに実装することも可能ですし、JavaScriptを使えば動きのあるバーやインタラクティブな操作が可能になります。今回紹介したさまざまな実装パターンを活用して、あなたのWebサイトにぴったりのプログレスバーを作ってみてください。

タイトルとURLをコピーしました