プレスホールド進捗ボタン

<button class="d08-09-09-btn" type="button">
          <svg class="d08-09-09-ring-svg" viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
            <circle class="d08-09-09-ring-bg" cx="32" cy="32" r="27" fill="none"/>
            <circle class="d08-09-09-ring" cx="32" cy="32" r="27" fill="none"/>
          </svg>
          <span class="d08-09-09-txt">長押しで削除</span>
        </button>

.d08-09-09-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:8px;-webkit-tap-highlight-color:transparent;user-select:none}
        .d08-09-09-ring-svg{transform:rotate(-90deg)}
        .d08-09-09-ring-bg{stroke:#f1d2d6;stroke-width:5}
        .d08-09-09-ring{stroke:#ff3b52;stroke-width:5;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170}
        .d08-09-09-txt{font-size:13px;font-weight:700;color:#c23}
        .d08-09-09-btn.is-done .d08-09-09-txt{color:#22c55e}

(function(){
        var btn=document.querySelector('#item-08-09-09 .d08-09-09-btn');
        var ring=document.querySelector('#item-08-09-09 .d08-09-09-ring');
        var txt=document.querySelector('#item-08-09-09 .d08-09-09-txt');
        if(!btn||!ring||!txt)return;
        var C=170,raf=null,start=null,DUR=1100;
        function reset(){ring.style.strokeDashoffset=String(C);}
        function step(ts){
          if(start===null)start=ts;
          var p=Math.min(1,(ts-start)/DUR);
          ring.style.strokeDashoffset=String(C*(1-p));
          if(p<1){raf=requestAnimationFrame(step);}
          else{
            raf=null;
            btn.classList.add('is-done');txt.textContent='削除しました';
            setTimeout(function(){btn.classList.remove('is-done');txt.textContent='長押しで削除';reset();},1200);
          }
        }
        function cancelPress(){
          if(raf){cancelAnimationFrame(raf);raf=null;}
          start=null;
          if(!btn.classList.contains('is-done'))reset();
        }
        function startPress(){
          if(btn.classList.contains('is-done'))return;
          if(raf)cancelAnimationFrame(raf);
          start=null;
          raf=requestAnimationFrame(step);
        }
        btn.addEventListener('mousedown',startPress);
        btn.addEventListener('touchstart',startPress,{passive:true});
        btn.addEventListener('mouseup',cancelPress);
        btn.addEventListener('mouseleave',cancelPress);
        btn.addEventListener('touchend',cancelPress);
        btn.addEventListener('touchcancel',cancelPress);
      })();