プログレスバー実装解説｜Progress Bar CSS & JS Guide

2026年4月13日

プログレスバーデザイン見本

バーの前進でタスクの進捗や手順の完了度を視覚的に伝えるプログレスバーの実装デモです。不定型（左から右に流れ続けるローディング型）と決定型（チェックボックスで進む型）、さらにステップ型の3パターンを収録。コピーしてすぐに使えるHTML・CSS・JSのコードを掲載しています。

① 不定型プログレスバー — overflow: hidden と @keyframes でバーを横断させる

速度: 2s 色: #4caf50

HTML

<div class="indeterminate-bar-container">
  <div class="indeterminate-bar"></div>
</div>

CSS

.indeterminate-bar-container {
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}

.indeterminate-bar {
  width: 100%;
  height: 100%;
  background-color: #4caf50;
  position: absolute;
  animation: indeterminate 2s infinite;
}

@keyframes indeterminate {
  0%   { left: -50%; width: 50%; }
  50%  { left: 25%;  width: 50%; }
  100% { left: 100%; width: 50%; }
}

position: absolute + overflow: hidden で端をクリップし @keyframes で横断させる

外枠に position: relative; overflow: hidden、バーに position: absolute を指定します。@keyframes で left: -50%（コンテナ左の外側）から left: 100%（右の外側）へ移動させることで、バーが画面端から端へ流れ続けます。外枠からはみ出た部分は overflow: hidden で非表示になるため、終わりのないアニメーションに見えます。速度は animation-duration、色は background-color を変えるだけで調整できます。

② 決定型プログレスバー（チェックボックス） — チェック数から width をパーセントで算出

Task 1 Task 2 Task 3

HTML

<div class="progress-bar-container">
  <div class="progress-bar"></div>
  <span class="progress-pct">0%</span>
</div>
<div class="progress-options">
  <label><input type="checkbox" class="progress-check"> Task 1</label>
  <label><input type="checkbox" class="progress-check"> Task 2</label>
  <label><input type="checkbox" class="progress-check"> Task 3</label>
</div>

CSS

.progress-bar-container {
  width: 100%;
  height: 24px;
  background-color: #f3f3f3;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  transition: width 0.4s ease;
  border-radius: 12px;
}

.progress-pct {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: #555;
}

.progress-options {
  display: flex;
  justify-content: center;
  gap: 20px;
}

var boxes = document.querySelectorAll('.progress-check');
var bar = document.querySelector('.progress-bar');
var pctEl = document.querySelector('.progress-pct');

function refreshProgress() {
  var total = boxes.length;
  var tally = document.querySelectorAll('.progress-check:checked').length;
  var pct = Math.round(tally / total * 100);
  bar.style.width = pct + '%';
  pctEl.textContent = pct + '%';
}

boxes.forEach(function(box) {
  box.addEventListener('change', refreshProgress);
});

refreshProgress();

:checked で絞り込んだ要素数を全体数で割り、width にパーセントで反映する

チェックボックス変更時に、:checked セレクターで絞り込んだ要素数（チェック済み数）を全体数で割り 100 を掛けた値を style.width に設定します。CSSの transition: width 0.4s ease を指定しておくことで幅の変化がアニメーションし、バーが滑らかに前進します。チェックボックスの数を増やしても計算は自動で追従するため、HTML の変更だけで対応できます。

③ ステップ式プログレスバー — 現在ステップから幅を算出し .step-done で見た目を一括切替

STEP 1

STEP 2

STEP 3

STEP 4

HTML

<div class="step-progress">
  <div class="step-bar-outer">
    <div class="step-bar-fill"></div>
  </div>
  <div class="steps">
    <div class="step step-done">
      <div class="step-circle">1</div>
      <span>STEP 1</span>
    </div>
    <div class="step">
      <div class="step-circle">2</div>
      <span>STEP 2</span>
    </div>
    <div class="step">
      <div class="step-circle">3</div>
      <span>STEP 3</span>
    </div>
    <div class="step">
      <div class="step-circle">4</div>
      <span>STEP 4</span>
    </div>
  </div>
  <div class="step-btns">
    <button class="step-btn" id="prev-btn">&#8592; 前へ</button>
    <button class="step-btn" id="next-btn">次へ &#8594;</button>
  </div>
</div>

CSS

.step-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 400px;
}

.step-bar-outer {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.step-bar-fill {
  width: 0%;
  height: 100%;
  background: #7c3aed;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.steps {
  display: flex;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #9ca3af;
  transition: all 0.3s;
}

.step.step-done .step-circle {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.step span {
  font-size: 11px;
  color: #9ca3af;
  transition: color 0.3s;
}

.step.step-done span {
  color: #7c3aed;
}

.step-btns {
  display: flex;
  gap: 12px;
}

.step-btn {
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid #7c3aed;
  background: #fff;
  color: #7c3aed;
  cursor: pointer;
  transition: all 0.2s;
}

.step-btn:hover {
  background: #7c3aed;
  color: #fff;
}

.step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

var stpNum = 1;
var totalStp = 4;
var fill = document.querySelector('.step-bar-fill');
var prevBtn = document.querySelector('#prev-btn');
var nextBtn = document.querySelector('#next-btn');
var stepEls = document.querySelectorAll('.step');

function refreshSteps() {
  fill.style.width = ((stpNum - 1) / (totalStp - 1) * 100) + '%';
  stepEls.forEach(function(el, i) {
    el.className = i < stpNum ? 'step step-done' : 'step';
  });
  prevBtn.disabled = stpNum === 1;
  nextBtn.disabled = stpNum === totalStp;
}

prevBtn.addEventListener('click', function() {
  if (stpNum > 1) { stpNum--; refreshSteps(); }
});
nextBtn.addEventListener('click', function() {
  if (stpNum < totalStp) { stpNum++; refreshSteps(); }
});

refreshSteps();

現在ステップから進捗率を算出し .step-done クラスで見た目を一括切り替え

現在のステップ番号を変数で管理し、前後ボタンのクリックで加減算します。バーの幅は (現在ステップ - 1) / (全ステップ数 - 1) × 100 で算出します。各ステップ要素を forEach でループし、インデックスが現在ステップ未満なら step-done クラスを付与することで、ステップ円の背景色と文字色をまとめて切り替えられます。ステップ数を増減する際は HTML と totalStp の値だけ変更すれば対応できます。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

プログレスバー 実装解説｜Progress Bar CSS & JS Guide

プログレスバー デザイン見本

① 不定型プログレスバー — overflow: hidden と @keyframes でバーを横断させる

② 決定型プログレスバー（チェックボックス） — チェック数から width をパーセントで算出

③ ステップ式プログレスバー — 現在ステップから幅を算出し .step-done で見た目を一括切替

プログレスバー実装解説｜Progress Bar CSS & JS Guide

プログレスバーデザイン見本