Lottie Success Checkmark Loader — Free HTML CSS JS Snippet

<div class="lsc-card">
  <div class="lsc-stage">
    <div class="lsc-lottie" id="lscLottie"></div>
    <div class="lsc-checkmark" id="lscCheckmark">
      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 13l4 4L19 7" />
      </svg>
    </div>
  </div>
  <div class="lsc-status" id="lscStatus">Processing…</div>
  <button class="lsc-btn" id="lscRestart" type="button">Run again</button>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0d14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.lsc-card{font-family:system-ui,-apple-system,sans-serif;background:#12141f;color:#e7e9f5;border:1px solid #262a3d;border-radius:16px;padding:32px;max-width:320px;width:100%;text-align:center}
.lsc-stage{position:relative;width:140px;height:140px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.lsc-lottie{width:140px;height:140px}
.lsc-checkmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#22c55e;border-radius:50%;width:90px;height:90px;margin:auto;opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.lsc-checkmark.lsc-show{opacity:1;transform:scale(1)}
.lsc-status{font-size:14px;font-weight:600;color:#9096b3;margin-bottom:18px;min-height:20px}
.lsc-btn{background:#181b2a;border:1px solid #262a3d;color:#e7e9f5;font-size:13px;font-weight:600;padding:9px 18px;border-radius:9px;cursor:pointer}
.lsc-btn:hover{background:#20233a}

// Minimal inline Lottie animation JSON — a pulsing/scaling circle used as
// the "processing" indicator before the success state takes over.
var animData = {
  v: "5.7.4", fr: 30, ip: 0, op: 60, w: 200, h: 200, nm: "pulse", ddd: 0, assets: [],
  layers: [{
    ddd: 0, ind: 1, ty: 4, nm: "circle", sr: 1,
    ks: {
      o: { a: 1, k: [
        { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 0, s: [100], e: [40] },
        { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 30, s: [40], e: [100] },
        { t: 60, s: [100] }
      ] },
      r: { a: 0, k: 0 },
      p: { a: 0, k: [100, 100, 0] },
      a: { a: 0, k: [0, 0, 0] },
      s: { a: 1, k: [
        { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 0, s: [70, 70, 100], e: [100, 100, 100] },
        { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 30, s: [100, 100, 100], e: [70, 70, 100] },
        { t: 60, s: [70, 70, 100] }
      ] }
    },
    ao: 0,
    shapes: [{
      ty: "gr",
      it: [
        { ty: "el", p: { a: 0, k: [0, 0] }, s: { a: 0, k: [120, 120] } },
        { ty: "fl", c: { a: 0, k: [0.388, 0.4, 0.965, 1] }, o: { a: 0, k: 100 } },
        { ty: "tr", p: { a: 0, k: [0, 0] }, a: { a: 0, k: [0, 0] }, s: { a: 0, k: [100, 100] }, r: { a: 0, k: 0 }, o: { a: 0, k: 100 } }
      ]
    }],
    ip: 0, op: 60, st: 0, bm: 0
  }]
};

var lottieContainer = document.getElementById('lscLottie');
var checkmarkEl = document.getElementById('lscCheckmark');
var statusEl = document.getElementById('lscStatus');
var restartBtn = document.getElementById('lscRestart');
var lottieInstance = null;
var timeoutId = null;

function runSequence() {
  clearTimeout(timeoutId);
  checkmarkEl.classList.remove('lsc-show');
  lottieContainer.style.display = 'block';
  statusEl.textContent = 'Processing…';

  if (lottieInstance) {
    lottieInstance.destroy();
  }
  lottieInstance = lottie.loadAnimation({
    container: lottieContainer,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animData,
  });

  timeoutId = setTimeout(function () {
    lottieInstance.stop();
    lottieContainer.style.display = 'none';
    checkmarkEl.classList.add('lsc-show');
    statusEl.textContent = 'Success!';
  }, 2200);
}

restartBtn.addEventListener('click', runSequence);

runSequence();