Video Buffering Overlay — Player Chrome Buffering Spinner

<div class="vb-player" id="vbPlayer">
  <div class="vb-frame">
    <div class="vb-scene"></div>
    <div class="vb-buffer-overlay" id="vbOverlay">
      <div class="vb-ring">
        <span></span><span></span><span></span>
      </div>
    </div>
  </div>

  <div class="vb-controls">
    <button type="button" class="vb-play" id="vbPlay" aria-label="Play">▶</button>
    <div class="vb-track">
      <div class="vb-buffered" id="vbBuffered"></div>
      <div class="vb-played" id="vbPlayed"></div>
      <div class="vb-scrubber" id="vbScrubber"></div>
    </div>
    <span class="vb-time" id="vbTime">0:00 / 2:41</span>
    <button type="button" class="vb-mute" aria-label="Mute">🔊</button>
  </div>
</div>
<button type="button" class="vb-demo" id="vbDemo">Simulate a rebuffer</button>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0f1a;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}

.vb-player{width:100%;max-width:420px;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.vb-frame{position:relative;aspect-ratio:16/9;overflow:hidden}
.vb-scene{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 25%, rgba(129,140,248,.35), transparent 45%),
  radial-gradient(circle at 75% 70%, rgba(34,211,238,.3), transparent 50%),
  linear-gradient(160deg,#141a2e,#05070d)}

.vb-buffer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.vb-buffer-overlay.show{opacity:1}

/* Three dots orbiting a shared centre — the classic "buffering" ring used by
   video platforms, distinct from a generic full-page spinner because it's
   scoped tightly to the video frame and sits above the paused/frozen scene. */
.vb-ring{position:relative;width:52px;height:52px;animation:vbRotate 1.1s linear infinite}
.vb-ring span{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;opacity:.9}
.vb-ring span:nth-child(1){top:0;left:50%;transform:translateX(-50%)}
.vb-ring span:nth-child(2){bottom:6px;left:6px}
.vb-ring span:nth-child(3){bottom:6px;right:6px}
@keyframes vbRotate{to{transform:rotate(360deg)}}

.vb-controls{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0c0e16}
.vb-play,.vb-mute{width:30px;height:30px;border-radius:8px;border:none;background:#1c2338;color:#fff;font-size:12px;cursor:pointer;flex-shrink:0}
.vb-play:hover,.vb-mute:hover{background:#242c47}
.vb-track{position:relative;flex:1;height:5px;background:#232a41;border-radius:3px}
.vb-buffered{position:absolute;inset:0;width:0%;background:#3a4267;border-radius:3px}
.vb-played{position:absolute;inset:0;width:0%;background:#818cf8;border-radius:3px}
.vb-scrubber{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);left:0%;box-shadow:0 0 0 3px rgba(129,140,248,.3)}
.vb-time{font-size:11px;color:#8a93ad;flex-shrink:0;font-variant-numeric:tabular-nums}

.vb-demo{padding:9px 16px;background:#1c2338;border:1px solid #2b3350;color:#c3cadf;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.vb-demo:hover{background:#242c47}

var overlay = document.getElementById('vbOverlay');
var playBtn = document.getElementById('vbPlay');
var played = document.getElementById('vbPlayed');
var buffered = document.getElementById('vbBuffered');
var scrubber = document.getElementById('vbScrubber');
var timeLabel = document.getElementById('vbTime');
var demoBtn = document.getElementById('vbDemo');

var DURATION = 161; // 2:41 in seconds
var current = 34;   // start partway through, already playing
var bufferedAhead = 46;
var playing = true;
var playTimer = null;
var rebuffering = false;

function fmt(sec) {
  var m = Math.floor(sec / 60);
  var s = Math.floor(sec % 60);
  return m + ':' + (s < 10 ? '0' : '') + s;
}

function render() {
  played.style.width = (current / DURATION * 100).toFixed(2) + '%';
  buffered.style.width = (bufferedAhead / DURATION * 100).toFixed(2) + '%';
  scrubber.style.left = (current / DURATION * 100).toFixed(2) + '%';
  timeLabel.textContent = fmt(current) + ' / ' + fmt(DURATION);
  playBtn.textContent = playing ? '❚❚' : '▶';
}

function tick() {
  if (!playing || rebuffering) return;
  if (current >= bufferedAhead) {
    // Playback caught up to the buffered edge — this is what a real
    // "waiting" event means: start showing the overlay until more data
    // arrives, rather than just freezing the frame silently.
    startBuffering();
    return;
  }
  current += 1;
  bufferedAhead = Math.min(DURATION, bufferedAhead + 0.6);
  render();
}

function startBuffering() {
  rebuffering = true;
  overlay.classList.add('show');
  // Simulate the network catching up: buffer ahead faster than playback
  // consumes it, then resume once there's enough runway again.
  var fillTimer = setInterval(function () {
    bufferedAhead = Math.min(DURATION, bufferedAhead + 4);
    render();
    if (bufferedAhead - current > 8 || bufferedAhead >= DURATION) {
      clearInterval(fillTimer);
      rebuffering = false;
      overlay.classList.remove('show');
    }
  }, 260);
}

playBtn.addEventListener('click', function () {
  playing = !playing;
  render();
});

demoBtn.addEventListener('click', function () {
  if (rebuffering) return;
  bufferedAhead = current + 0.5; // force playback to hit the buffered edge almost immediately
  startBuffering();
});

render();
setInterval(tick, 1000);