プログレスバー 1 — APIポーリング＋フェイクプログレス

/* プログレスバー パターン集 — style.css
   色を変えたいときは :root の変数を書き換えるだけでOK */
:root {
  --bar-color:  #2563EB;  /* バー通常色（青） */
  --bar-done:   #16A34A;  /* バー完了色（緑） */
  --bar-bg:     #E5E7EB;  /* バー外枠の背景 */
  --text-muted: #5A6A7A;  /* サブテキスト色 */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  color: #1A2332;
}

/* プログレスバーを囲むブロック */
.pb-wrap {
  margin-bottom: 40px;
  padding: 20px;
  background: #F4F6F9;
  border-radius: 8px;
}

.pb-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #2563EB;
}

/* バー外枠 */
.pb-bar-wrap {
  background: var(--bar-bg);
  border-radius: 9999px;
  height: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* バー本体 */
.pb-bar {
  height: 100%;
  width: 0%;
  background: var(--bar-color);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* 完了時に緑に切り替える */
.pb-bar.done { background: var(--bar-done); }

/* ステータステキスト */
.pb-status {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
  min-height: 1.5em;
}

/* ボタン群 */
.pb-controls { display: flex; gap: 8px; flex-wrap: wrap; }

.pb-controls button {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, opacity 0.15s;
}

/* 開始ボタン（青） */
#poll-start-btn, #fake-start-btn {
  background: #2563EB;
  color: #fff;
  border: none;
}
#poll-start-btn:hover:not(:disabled),
#fake-start-btn:hover:not(:disabled) { background: #1D4ED8; }

/* 完了ボタン（緑） */
#fake-done-btn {
  background: #16A34A;
  color: #fff;
  border: none;
}
#fake-done-btn:hover:not(:disabled) { background: #15803D; }

/* リセットボタン */
#poll-reset-btn, #fake-reset-btn {
  background: #fff;
  color: #5A6A7A;
  border: 1.5px solid #D0D7E0;
}
#poll-reset-btn:hover, #fake-reset-btn:hover { background: #F4F6F9; }

button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 480px) { body { padding: 16px; } }

// ==========================================
// Pattern 1 — APIポーリング
// ==========================================
var pollIntervalId = null;
var pollProgress   = 0;
var POLL_INTERVAL  = 1500; // ポーリング間隔（ミリ秒）

// 進捗率に応じたステータステキストを返す
function getPollStatus(p) {
  if (p >= 100) return '完了！';
  if (p >= 80)  return '最終処理中... (' + p + '%)';
  if (p >= 40)  return '処理中... (' + p + '%)';
  if (p >= 10)  return 'データ取得中... (' + p + '%)';
  return '接続中...';
}

function startPolling() {
  if (pollIntervalId) return; // 二重起動を防ぐ
  document.getElementById('poll-start-btn').disabled = true;

  // ── Step 1: 処理を開始するAPIを叩いてジョブIDを受け取る ──
  // 実際の実装:
  //   const res       = await fetch('/jobs', { method: 'POST' });
  //   const { jobId } = await res.json(); // → { jobId: 'abc123' }
  // デモ用（サーバーなしで動かすため即座に仮IDを生成）:
  var jobId = 'demo-' + Date.now();
  document.getElementById('poll-status').textContent = '接続中...';

  // ── Step 2: 一定間隔でAPIを叩いて進捗を確認する（ポーリング）──
  // 実際の実装:
  //   const res          = await fetch('/jobs/' + jobId + '/status');
  //   const { progress } = await res.json(); // → { progress: 68 } のような数値
  //   pollProgress       = progress;
  // デモ用（5〜15%のランダム増分でAPIレスポンスをシミュレート）:
  pollIntervalId = setInterval(function () {
    var increment = Math.floor(Math.random() * 11) + 5;
    pollProgress  = Math.min(pollProgress + increment, 100);
    var bar    = document.getElementById('poll-bar');
    var status = document.getElementById('poll-status');
    bar.style.width    = pollProgress + '%';
    status.textContent = getPollStatus(pollProgress);
    if (pollProgress >= 100) {
      bar.classList.add('done');
      clearInterval(pollIntervalId); // 完了したらポーリングを止める
      pollIntervalId = null;
      document.getElementById('poll-reset-btn').hidden = false;
    }
  }, POLL_INTERVAL);
}

function resetPolling() {
  // 実行中のインターバルを必ず止める
  if (pollIntervalId) { clearInterval(pollIntervalId); pollIntervalId = null; }
  pollProgress = 0;
  var bar = document.getElementById('poll-bar');
  bar.style.width = '0%';
  bar.classList.remove('done');
  document.getElementById('poll-status').textContent = '待機中';
  document.getElementById('poll-start-btn').disabled = false;
  document.getElementById('poll-reset-btn').hidden   = true;
}

// ==========================================
// Pattern 2 — フェイクプログレス
// ==========================================
var fakeProgress = 0;
var fakeRafId    = null;
var FAKE_CAP     = 90;    // 自動前進の上限（%）
var FAKE_RATE    = 0.03;  // 減速係数（小さいほどゆっくり進む）

function fakeTick() {
  // 90%に近づくほど増分が小さくなる（指数的減速）
  fakeProgress += (FAKE_CAP - fakeProgress) * FAKE_RATE;
  var bar    = document.getElementById('fake-bar');
  var status = document.getElementById('fake-status');
  bar.style.width    = Math.floor(fakeProgress) + '%';
  status.textContent = '処理中... (' + Math.floor(fakeProgress) + '%)';

  if (fakeProgress < FAKE_CAP - 0.1) {
    fakeRafId = requestAnimationFrame(fakeTick);
  } else {
    // 90%付近で停止し「処理完了」ボタンを活性化する
    fakeProgress = FAKE_CAP;
    bar.style.width    = FAKE_CAP + '%';
    status.textContent = '処理中... しばらくお待ちください';
    document.getElementById('fake-done-btn').disabled = false;
  }
}

function startFake() {
  if (fakeRafId) return; // 二重起動を防ぐ
  document.getElementById('fake-start-btn').disabled = true;
  fakeRafId = requestAnimationFrame(fakeTick);
}

function completeFake() {
  fakeProgress = 100;
  var bar = document.getElementById('fake-bar');
  bar.style.width = '100%';
  bar.classList.add('done');
  document.getElementById('fake-status').textContent  = '完了！';
  document.getElementById('fake-done-btn').disabled   = true;
  document.getElementById('fake-reset-btn').hidden    = false;
}

function resetFake() {
  if (fakeRafId) { cancelAnimationFrame(fakeRafId); fakeRafId = null; }
  fakeProgress = 0;
  var bar = document.getElementById('fake-bar');
  bar.style.width = '0%';
  bar.classList.remove('done');
  document.getElementById('fake-status').textContent  = '待機中';
  document.getElementById('fake-start-btn').disabled  = false;
  document.getElementById('fake-done-btn').disabled   = true;
  document.getElementById('fake-reset-btn').hidden    = true;
}