Loading Overlay — Free HTML CSS JS Snippet

<div class="page">
  <div class="content-card">
    <h2>Dashboard Overview</h2>
    <p>This card represents your page content.</p>
    <div class="mini-grid">
      <div class="stat-block"><div class="stat-n">$48,295</div><div class="stat-l">Revenue</div></div>
      <div class="stat-block"><div class="stat-n">1,284</div><div class="stat-l">Users</div></div>
      <div class="stat-block"><div class="stat-n">94.2%</div><div class="stat-l">Uptime</div></div>
    </div>
  </div>

  <div class="trigger-row">
    <button class="trigger-btn" onclick="showOverlay('spinner')">Spinner overlay</button>
    <button class="trigger-btn" onclick="showOverlay('dots')">Dots overlay</button>
    <button class="trigger-btn" onclick="showOverlay('progress')">Progress overlay</button>
    <button class="trigger-btn outline" onclick="hideOverlay()">Hide</button>
  </div>

  <!-- Overlay -->
  <div class="overlay" id="overlay">
    <div class="overlay-box" id="overlay-box">
      <!-- Spinner -->
      <div class="loader-wrap" id="l-spinner">
        <div class="spinner"></div>
        <div class="overlay-msg">Loading data…</div>
      </div>
      <!-- Dots -->
      <div class="loader-wrap hidden" id="l-dots">
        <div class="dots"><span></span><span></span><span></span></div>
        <div class="overlay-msg">Processing…</div>
      </div>
      <!-- Progress -->
      <div class="loader-wrap hidden" id="l-progress">
        <div class="overlay-msg">Uploading files…</div>
        <div class="prog-track"><div class="prog-fill" id="prog-fill"></div></div>
        <div class="prog-pct" id="prog-pct">0%</div>
      </div>
    </div>
  </div>
</div>

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

.page { width: 100%; max-width: 500px; position: relative; display: flex; flex-direction: column; gap: 16px; }

.content-card { background: #fff; border-radius: 16px; padding: 24px; border: 1px solid #e2e8f0; }
.content-card h2 { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.content-card p  { font-size: 13px; color: #64748b; margin-bottom: 20px; }
.mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.stat-block { text-align: center; }
.stat-n { font-size: 18px; font-weight: 800; color: #0f172a; }
.stat-l { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }

.trigger-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trigger-btn { background: #6366f1; color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.trigger-btn:hover { background: #4f46e5; }
.trigger-btn.outline { background: transparent; color: #475569; border: 1.5px solid #e2e8f0; }
.trigger-btn.outline:hover { border-color: #6366f1; color: #6366f1; }

/* Overlay */
.overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); border-radius: 16px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 10; }
.overlay.visible { opacity: 1; pointer-events: all; }

.overlay-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loader-wrap.hidden { display: none; }

.overlay-msg { font-size: 14px; font-weight: 600; color: #475569; }

/* Spinner */
.spinner { width: 40px; height: 40px; border: 3px solid #e2e8f0; border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dots */
.dots { display: flex; gap: 7px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: #6366f1; animation: bounce 1.2s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,100%{transform:translateY(0);opacity:0.4} 50%{transform:translateY(-10px);opacity:1} }

/* Progress */
.prog-track { width: 220px; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.prog-fill  { height: 100%; background: linear-gradient(90deg,#6366f1,#10b981); border-radius: 3px; width: 0%; transition: width 0.3s ease; }
.prog-pct   { font-size: 12px; font-weight: 700; color: #6366f1; }

let progInterval = null;

function showOverlay(type) {
  clearInterval(progInterval);
  ['l-spinner','l-dots','l-progress'].forEach(id => {
    document.getElementById(id).classList.add('hidden');
  });
  document.getElementById('l-' + type).classList.remove('hidden');
  document.getElementById('overlay').classList.add('visible');

  if (type === 'progress') {
    let pct = 0;
    document.getElementById('prog-fill').style.width = '0%';
    document.getElementById('prog-pct').textContent = '0%';
    progInterval = setInterval(() => {
      pct += Math.random() * 8 + 2;
      if (pct >= 100) { pct = 100; clearInterval(progInterval); setTimeout(hideOverlay, 600); }
      document.getElementById('prog-fill').style.width = pct.toFixed(0) + '%';
      document.getElementById('prog-pct').textContent = pct.toFixed(0) + '%';
    }, 300);
  } else {
    setTimeout(hideOverlay, 3000);
  }
}

function hideOverlay() {
  clearInterval(progInterval);
  document.getElementById('overlay').classList.remove('visible');
}