プログレス通知(処理中%)

<div class="d09-02-09-card">
          <div class="d09-02-09-head">
            <span class="d09-02-09-status">処理中...</span>
            <span class="d09-02-09-pct">0%</span>
          </div>
          <div class="d09-02-09-track"><div class="d09-02-09-fill"></div></div>
          <svg class="d09-02-09-check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none"/><path d="M8 12l3 3 5-6" fill="none"/></svg>
        </div>

.d09-02-09-card{width:100%;max-width:280px;background:#f6f7fb;border:1px solid #e5e8f0;border-radius:12px;padding:16px;position:relative}
        .d09-02-09-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .d09-02-09-status{font-size:13px;font-weight:600;color:#4a5162}
        .d09-02-09-pct{font-size:13px;font-weight:700;color:#4f46e5;font-variant-numeric:tabular-nums}
        .d09-02-09-track{height:9px;background:#e2e6ef;border-radius:6px;overflow:hidden}
        .d09-02-09-fill{height:100%;width:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:6px;transition:width .18s linear}
        .d09-02-09-check{position:absolute;top:14px;right:14px;width:22px;height:22px;stroke:#2fa85e;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.5);transition:all .3s}
        .d09-02-09-card.d09-02-09-done .d09-02-09-fill{background:#2fa85e}
        .d09-02-09-card.d09-02-09-done .d09-02-09-pct{color:#2fa85e}
        .d09-02-09-card.d09-02-09-done .d09-02-09-check{opacity:1;transform:scale(1)}

(function(){
        var root=document.getElementById('item-09-02-09');
        var card=root.querySelector('.d09-02-09-card');
        var fill=root.querySelector('.d09-02-09-fill');
        var pct=root.querySelector('.d09-02-09-pct');
        var status=root.querySelector('.d09-02-09-status');
        var p=0,timer;
        function run(){
          p=0;card.classList.remove('d09-02-09-done');status.textContent='処理中...';
          clearInterval(timer);
          timer=setInterval(function(){
            p+=Math.random()*8+2;
            if(p>=100){p=100;clearInterval(timer);card.classList.add('d09-02-09-done');status.textContent='完了しました';setTimeout(run,2000);}
            fill.style.width=p+'%';pct.textContent=Math.floor(p)+'%';
          },180);
        }
        run();
      })();