アップロードキュー管理リスト

<div class="d04-04-05-list">
          <div class="d04-04-05-row"><span class="d04-04-05-name">photo1.png</span><span class="d04-04-05-status">待機中</span></div>
          <div class="d04-04-05-row"><span class="d04-04-05-name">photo2.png</span><span class="d04-04-05-status">待機中</span></div>
          <div class="d04-04-05-row"><span class="d04-04-05-name">photo3.png</span><span class="d04-04-05-status">待機中</span></div>
        </div>

.d04-04-05 .d04-04-05-list{width:100%;max-width:210px;display:flex;flex-direction:column;gap:8px}
        .d04-04-05 .d04-04-05-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:#f9fafb;border-radius:8px}
        .d04-04-05 .d04-04-05-name{font-size:11px;color:#374151}
        .d04-04-05 .d04-04-05-status{font-size:10px;padding:3px 8px;border-radius:99px;background:#e5e7eb;color:#6b7280;transition:all .3s ease}
        .d04-04-05 .d04-04-05-status.uploading{background:#dbeafe;color:#2563eb}
        .d04-04-05 .d04-04-05-status.done{background:#dcfce7;color:#16a34a}

(function(){
          var root=document.currentScript.closest('.item');
          var st=root.querySelectorAll('.d04-04-05-status');
          function setState(i,cls,text){st[i].className='d04-04-05-status '+cls;st[i].textContent=text;}
          function reset(){for(var i=0;i<st.length;i++)setState(i,'','待機中');}
          function run(i){
            if(i>=st.length){setTimeout(function(){reset();run(0);},1200);return;}
            setState(i,'uploading','アップロード中');
            setTimeout(function(){
              setState(i,'done','完了');
              run(i+1);
            },1000);
          }
          reset();
          setTimeout(function(){run(0);},600);
        })();