エラー・リトライ付きアップロード

<div class="d04-04-07-card">
          <div class="d04-04-07-bar"><div class="d04-04-07-fill"></div></div>
          <div class="d04-04-07-msg">
            <svg class="d04-04-07-icon" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
            <span class="d04-04-07-text">アップロードに失敗しました</span>
          </div>
          <button class="d04-04-07-retry" type="button">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
            再試行
          </button>
        </div>

.d04-04-07 .d04-04-07-card{width:100%;max-width:200px;display:flex;flex-direction:column;gap:8px}
        .d04-04-07 .d04-04-07-bar{height:7px;background:#e5e7eb;border-radius:4px;overflow:hidden}
        .d04-04-07 .d04-04-07-fill{height:100%;width:0%;background:linear-gradient(90deg,#818cf8,#8b5cf6);border-radius:4px;transition:width .15s linear,background .3s ease}
        .d04-04-07 .d04-04-07-fill.error{background:#ef4444}
        .d04-04-07 .d04-04-07-fill.success{background:linear-gradient(90deg,#4ade80,#16a34a)}
        .d04-04-07 .d04-04-07-msg{display:none;align-items:center;gap:5px;font-size:11px;color:#ef4444}
        .d04-04-07 .d04-04-07-msg.show{display:flex}
        .d04-04-07 .d04-04-07-msg svg{stroke:#ef4444;flex-shrink:0}
        .d04-04-07 .d04-04-07-msg.ok{color:#16a34a}
        .d04-04-07 .d04-04-07-msg.ok svg{stroke:#16a34a}
        .d04-04-07 .d04-04-07-retry{display:none;align-items:center;gap:5px;justify-content:center;padding:6px;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:11px;color:#4b5563;cursor:pointer}
        .d04-04-07 .d04-04-07-retry.show{display:flex}

(function(){
          var root=document.currentScript.closest('.item');
          var fill=root.querySelector('.d04-04-07-fill');
          var msg=root.querySelector('.d04-04-07-msg');
          var text=root.querySelector('.d04-04-07-text');
          var retry=root.querySelector('.d04-04-07-retry');
          function fail(){
            fill.style.width='0%';
            fill.className='d04-04-07-fill';
            msg.className='d04-04-07-msg';
            retry.classList.remove('show');
            var v=0;
            var t=setInterval(function(){
              v+=4;
              if(v>=54){
                v=54;
                clearInterval(t);
                fill.classList.add('error');
                msg.classList.add('show');
                text.textContent='アップロードに失敗しました';
                retry.classList.add('show');
              }
              fill.style.width=v+'%';
            },60);
          }
          function succeed(){
            msg.classList.remove('show');
            retry.classList.remove('show');
            fill.className='d04-04-07-fill';
            var v=54;
            var t=setInterval(function(){
              v+=4;
              if(v>=100){
                v=100;
                clearInterval(t);
                fill.classList.add('success');
                msg.classList.add('show','ok');
                text.textContent='アップロードが完了しました';
                setTimeout(fail,2200);
              }
              fill.style.width=v+'%';
            },60);
          }
          retry.addEventListener('click',succeed);
          fail();
        })();