ポンと弾む成功確認アイコン

<div class="d08-11-02-stage">
          <button class="d08-11-02-trigger" type="button">保存する</button>
          <div class="d08-11-02-check-wrap">
            <span class="d08-11-02-ring" aria-hidden="true"></span>
            <span class="d08-11-02-icon" aria-hidden="true">
              <svg viewBox="0 0 40 40" width="38" height="38"><circle cx="20" cy="20" r="18" fill="#22c55e"/><path d="M12 21l5 5 11-12" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
            </span>
            <span class="d08-11-02-msg">保存しました</span>
          </div>
        </div>

.d08-11-02-stage{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
        .d08-11-02-trigger{background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:11px 26px;font-size:14px;font-weight:700;color:#2a2d3a;cursor:pointer}
        .d08-11-02-trigger:hover{border-color:#22c55e}
        .d08-11-02-check-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:scale(.6)}
        .d08-11-02-check-wrap.is-pop{animation:d08-11-02-pop .5s cubic-bezier(.34,1.6,.5,1) forwards}
        @keyframes d08-11-02-pop{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.18)}75%{transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
        .d08-11-02-ring{position:absolute;top:19px;left:50%;width:38px;height:38px;border-radius:50%;border:2px solid #22c55e;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none}
        .d08-11-02-ring.is-go{animation:d08-11-02-ring .6s ease-out forwards}
        @keyframes d08-11-02-ring{0%{transform:translate(-50%,-50%) scale(.6);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
        .d08-11-02-msg{font-size:12px;font-weight:700;color:#22c55e}

(function(){
        var trigger=document.querySelector('#item-08-11-02 .d08-11-02-trigger');
        var wrap=document.querySelector('#item-08-11-02 .d08-11-02-check-wrap');
        var ring=document.querySelector('#item-08-11-02 .d08-11-02-ring');
        if(!trigger||!wrap||!ring)return;
        trigger.addEventListener('click',function(){
          wrap.classList.remove('is-pop');void wrap.offsetWidth;wrap.classList.add('is-pop');
          ring.classList.remove('is-go');void ring.offsetWidth;ring.classList.add('is-go');
        });
      })();