ローディング→成功遷移

<button class="d09-02-08-btn" data-state="idle">
          <span class="d09-02-08-label">送信する</span>
          <span class="d09-02-08-spin"></span>
          <svg class="d09-02-08-check" viewBox="0 0 24 24"><path d="M5 12l4 4 10-11"/></svg>
        </button>

.d09-02-08-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:46px;padding:0 22px;border:none;border-radius:24px;background:#4f46e5;color:#fff;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;transition:background .3s,min-width .3s}
        .d09-02-08-btn .d09-02-08-spin,.d09-02-08-btn .d09-02-08-check{position:absolute;opacity:0}
        .d09-02-08-spin{width:20px;height:20px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%}
        .d09-02-08-check{width:24px;height:24px;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
        .d09-02-08-btn[data-state="loading"]{min-width:46px}
        .d09-02-08-btn[data-state="loading"] .d09-02-08-label{opacity:0}
        .d09-02-08-btn[data-state="loading"] .d09-02-08-spin{opacity:1;animation:d268rot .7s linear infinite}
        .d09-02-08-btn[data-state="done"]{min-width:46px;background:#2fa85e}
        .d09-02-08-btn[data-state="done"] .d09-02-08-label{opacity:0}
        .d09-02-08-btn[data-state="done"] .d09-02-08-check{opacity:1;animation:d268pop .4s ease}
        @keyframes d268rot{to{transform:rotate(360deg)}}
        @keyframes d268pop{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

(function(){
        var root=document.getElementById('item-09-02-08');
        var btn=root.querySelector('.d09-02-08-btn');
        btn.addEventListener('click',function(){
          if(btn.dataset.state!=='idle')return;
          btn.dataset.state='loading';
          setTimeout(function(){
            btn.dataset.state='done';
            setTimeout(function(){btn.dataset.state='idle';},1800);
          },1500);
        });
      })();