円形カウントダウン付き取り消しトースト

<div class="stage09-12-12">
          <div class="toast09-12-12">
            <span class="ring09-12-12">
              <svg class="ringsvg09-12-12" viewBox="0 0 36 36">
                <circle class="ringbg09-12-12" cx="18" cy="18" r="15.5"></circle>
                <circle class="ringfg09-12-12" cx="18" cy="18" r="15.5"></circle>
              </svg>
              <button type="button" class="undo09-12-12">戻す</button>
            </span>
            <span class="tx09-12-12">メールを削除しました</span>
          </div>
        </div>

.d09-12-12{ background:#f4f5fb; }
        .d09-12-12 .stage09-12-12{ position:absolute; inset:0; overflow:hidden; }
        .d09-12-12 .toast09-12-12{
          position:absolute; left:50%; bottom:20px; width:236px;
          transform:translate(-50%,140%); opacity:0;
          display:flex; align-items:center; gap:12px;
          background:#1f2333; border-radius:12px; padding:10px 14px;
          box-shadow:0 12px 28px rgba(20,30,50,.3);
          transition:transform .4s ease, opacity .3s ease;
        }
        .d09-12-12 .toast09-12-12.show09-12-12{ transform:translate(-50%,0); opacity:1; }
        .d09-12-12 .ring09-12-12{ position:relative; flex:none; width:36px; height:36px; }
        .d09-12-12 .ringsvg09-12-12{ width:36px; height:36px; transform:rotate(-90deg); }
        .d09-12-12 .ringbg09-12-12{ fill:none; stroke:#3b3f52; stroke-width:2.4; }
        .d09-12-12 .ringfg09-12-12{ fill:none; stroke:#818cf8; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:0; }
        .d09-12-12 .undo09-12-12{
          position:absolute; inset:0; margin:auto; width:30px; height:30px; border-radius:50%;
          border:none; background:transparent; color:#c7d2fe; font-size:8.5px; font-weight:700;
          cursor:pointer; padding:0;
        }
        .d09-12-12 .tx09-12-12{ font-size:11.8px; color:#e5e7eb; font-weight:600; }
        @keyframes ringShrink09-12-12{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:97.4; } }

(function(){
        var root = document.currentScript.closest('.item').querySelector('.d09-12-12');
        var toast = root.querySelector('.toast09-12-12');
        var ringfg = root.querySelector('.ringfg09-12-12');
        var tx = root.querySelector('.tx09-12-12');
        var undoBtn = root.querySelector('.undo09-12-12');
        var DURATION = 3200;
        var timer = null;
        function cycle(){
          tx.textContent = 'メールを削除しました';
          toast.classList.add('show09-12-12');
          ringfg.style.animation = 'none';
          void ringfg.offsetWidth;
          ringfg.style.animation = 'ringShrink09-12-12 ' + DURATION + 'ms linear forwards';
          clearTimeout(timer);
          timer = setTimeout(function(){
            toast.classList.remove('show09-12-12');
          }, DURATION);
        }
        undoBtn.addEventListener('click', function(){
          clearTimeout(timer);
          tx.textContent = '元に戻しました';
          ringfg.style.animation = 'none';
          ringfg.style.strokeDashoffset = '0';
          setTimeout(function(){ toast.classList.remove('show09-12-12'); }, 700);
        });
        cycle();
        setInterval(cycle, DURATION + 1900);
      })();