Lottie Button Micro Loader — Free HTML CSS JS Snippet

<div class="lbm-wrap">
  <button class="lbm-btn" id="lbmBtn" type="button">
    <span class="lbm-label" id="lbmLabel">Save changes</span>
    <span class="lbm-lottie" id="lbmLottie"></span>
  </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}
.lbm-wrap{display:flex;align-items:center;justify-content:center}
.lbm-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#6366f1;color:#fff;border:none;font-size:14px;font-weight:700;padding:13px 26px;border-radius:10px;cursor:pointer;min-width:150px;font-family:system-ui,-apple-system,sans-serif;transition:background .15s}
.lbm-btn:hover{background:#4f52e0}
.lbm-btn:disabled{cursor:default;opacity:.9}
.lbm-lottie{width:22px;height:22px;display:none}
.lbm-lottie.lbm-active{display:inline-block}

// Small looping Lottie animation, rendered at 22x22px inside the button
// while the "loading" state is active.
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: [1, 1, 1, 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 btn = document.getElementById('lbmBtn');
var label = document.getElementById('lbmLabel');
var lottieContainer = document.getElementById('lbmLottie');
var lottieInstance = null;
var originalLabel = label.textContent;
var busy = false;

btn.addEventListener('click', function () {
  if (busy) return;
  busy = true;
  btn.disabled = true;
  label.style.display = 'none';
  lottieContainer.classList.add('lbm-active');

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

  setTimeout(function () {
    lottieInstance.destroy();
    lottieContainer.classList.remove('lbm-active');
    label.style.display = '';
    label.textContent = 'Done';
    btn.disabled = false;
    busy = false;

    setTimeout(function () {
      label.textContent = originalLabel;
    }, 1600);
  }, 1500);
});