一括アップロード全体進捗バー

<div class="d04-04-06-wrap">
          <div class="d04-04-06-head"><span>全体の進捗</span><span class="d04-04-06-total">0%</span></div>
          <div class="d04-04-06-bar d04-04-06-big"><div class="d04-04-06-fill d04-04-06-fillbig"></div></div>
          <div class="d04-04-06-mini">
            <div class="d04-04-06-bar"><div class="d04-04-06-fill" data-i="0"></div></div>
            <div class="d04-04-06-bar"><div class="d04-04-06-fill" data-i="1"></div></div>
            <div class="d04-04-06-bar"><div class="d04-04-06-fill" data-i="2"></div></div>
          </div>
        </div>

.d04-04-06 .d04-04-06-wrap{width:100%;max-width:220px;display:flex;flex-direction:column;gap:10px}
        .d04-04-06 .d04-04-06-head{display:flex;justify-content:space-between;font-size:11px;color:#374151}
        .d04-04-06 .d04-04-06-bar{height:6px;background:#e5e7eb;border-radius:4px;overflow:hidden}
        .d04-04-06 .d04-04-06-fill{height:100%;width:0%;background:linear-gradient(90deg,#818cf8,#8b5cf6);border-radius:4px}
        .d04-04-06 .d04-04-06-bar.d04-04-06-big{height:9px}
        .d04-04-06 .d04-04-06-mini{display:flex;flex-direction:column;gap:6px}
        .d04-04-06 .d04-04-06-mini .d04-04-06-bar{height:4px}

(function(){
          var root=document.currentScript.closest('.item');
          var fills=root.querySelectorAll('.d04-04-06-mini .d04-04-06-fill');
          var big=root.querySelector('.d04-04-06-fillbig');
          var total=root.querySelector('.d04-04-06-total');
          var speeds=[0.6,0.9,0.4];
          var vals=[0,0,0];
          setInterval(function(){
            var sum=0;
            for(var i=0;i<fills.length;i++){
              vals[i]+=speeds[i];
              if(vals[i]>100)vals[i]=100;
              fills[i].style.width=vals[i]+'%';
              sum+=vals[i];
            }
            var avg=sum/fills.length;
            big.style.width=avg+'%';
            total.textContent=Math.round(avg)+'%';
            if(avg>=100){
              setTimeout(function(){ vals=[0,0,0]; },1500);
            }
          },90);
        })();