Buffer Indicator

<!-- Buffer Indicator — overlay over your <video>; show when 'waiting' fires -->
<div class="nuda-buf">
  <video class="nuda-buf__video" src="/your.mp4"></video>
  <div class="nuda-buf__overlay">
    <div class="nuda-buf__spinner"></div>
    <span class="nuda-buf__label">Buffering…</span>
  </div>
</div>

/* Buffer Indicator
   Translucent overlay with spinner for video stalls.
   Customize: --buf-accent */

.nuda-buf {
  --buf-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1f, #0e0e10);
}

.nuda-buf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nuda-buf__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.nuda-buf__spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--buf-accent);
  border-radius: 50%;
  animation: nuda-buf-spin 0.8s linear infinite;
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}

.nuda-buf__label {
  font: 600 0.75rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@keyframes nuda-buf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .nuda-buf__spinner { animation: none; }
}