App Splash Screen — Free Launch Loading UI Snippet

<div class="sp-phone">
  <div class="sp-screen" id="spScreen">
    <div class="sp-center">
      <div class="sp-logo">
        <svg viewBox="0 0 64 64" width="72"><circle class="sp-ring" cx="32" cy="32" r="26"/><path class="sp-tick" d="M22 33l7 7 14-16"/></svg>
      </div>
      <h1 class="sp-name">Cobalt</h1>
      <div class="sp-load"><span class="sp-fill" id="spFill"></span></div>
      <p class="sp-status" id="spStatus">Starting up…</p>
    </div>
    <div class="sp-foot">v2.4.0 · © Cobalt Labs</div>
  </div>
  <button type="button" class="sp-replay" id="spReplay">Replay</button>
</div>

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

.sp-phone{width:280px;height:580px;background:#0b1220;border-radius:46px;padding:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 2px #1e293b}
.sp-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(160deg,#4f46e5,#7c3aed 55%,#0f172a);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}

.sp-center{display:flex;flex-direction:column;align-items:center;animation:spRise .7s cubic-bezier(.22,1,.36,1) both}
@keyframes spRise{from{opacity:0;transform:translateY(14px)}}
.sp-logo{width:88px;height:88px;border-radius:26px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.sp-ring{fill:none;stroke:#fff;stroke-width:4;stroke-dasharray:164;stroke-dashoffset:164;animation:spDraw 1s ease forwards .2s}
.sp-tick{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:spDraw .5s ease forwards 1s}
@keyframes spDraw{to{stroke-dashoffset:0}}
.sp-name{font-size:26px;font-weight:800;letter-spacing:.5px;margin-bottom:24px}

.sp-load{width:160px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.sp-fill{display:block;height:100%;width:0;background:#fff;border-radius:3px;transition:width .25s ease}
.sp-status{font-size:12px;opacity:.85;margin-top:12px;font-weight:600;min-height:16px}
.sp-foot{position:absolute;bottom:26px;font-size:10px;opacity:.6}

.sp-replay{margin-top:20px;background:#1e293b;color:#fff;border:none;border-radius:9px;padding:9px 18px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.sp-replay:hover{background:#334155}

var fill = document.getElementById('spFill');
var status = document.getElementById('spStatus');
var center = document.querySelector('.sp-center');
var STEPS = [
  { p: 25, t: 'Loading assets…' },
  { p: 55, t: 'Restoring session…' },
  { p: 82, t: 'Syncing data…' },
  { p: 100, t: 'Ready' }
];
var timer = null;

function run() {
  var i = 0;
  fill.style.width = '0%';
  status.textContent = 'Starting up…';
  clearInterval(timer);
  timer = setInterval(function () {
    if (i >= STEPS.length) {
      clearInterval(timer);
      // Fade the splash out once loading completes, like handing off to the app.
      center.style.transition = 'opacity .4s, transform .4s';
      center.style.opacity = '0';
      center.style.transform = 'scale(1.08)';
      setTimeout(function () { center.style.transition = 'none'; center.style.opacity = ''; center.style.transform = ''; }, 600);
      return;
    }
    fill.style.width = STEPS[i].p + '%';
    status.textContent = STEPS[i].t;
    i++;
  }, 750);
}

document.getElementById('spReplay').addEventListener('click', run);
run();