ストレージ使用量メーター演出

<div class="d04-04-12-wrap">
          <div class="d04-04-12-head"><span>ストレージ使用量</span><span class="d04-04-12-txt">3.2GB / 5GB</span></div>
          <div class="d04-04-12-bar"><div class="d04-04-12-fill" style="width:64%"></div></div>
          <button type="button" class="d04-04-12-btn">ファイルを追加(+0.6GB)</button>
          <p class="d04-04-12-warn">&nbsp;</p>
        </div>

.d04-04-12 .d04-04-12-wrap{width:100%;max-width:230px;display:flex;flex-direction:column;gap:8px}
        .d04-04-12 .d04-04-12-head{display:flex;justify-content:space-between;font-size:11px;color:#374151}
        .d04-04-12 .d04-04-12-bar{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
        .d04-04-12 .d04-04-12-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#34d399,#10b981);transition:width .5s cubic-bezier(.2,.8,.2,1),background .4s ease}
        .d04-04-12 .d04-04-12-fill.is-warn{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
        .d04-04-12 .d04-04-12-fill.is-danger{background:linear-gradient(90deg,#f87171,#ef4444)}
        .d04-04-12 .d04-04-12-btn{margin-top:4px;border:none;border-radius:999px;padding:8px 14px;background:#1f2937;color:#fff;font-size:11.5px;font-weight:600;cursor:pointer}
        .d04-04-12 .d04-04-12-warn{margin:0;font-size:10.5px;color:#ef4444;min-height:14px}

(function(){
          var root=document.currentScript.closest('.item');
          var fill=root.querySelector('.d04-04-12-fill');
          var txt=root.querySelector('.d04-04-12-txt');
          var warn=root.querySelector('.d04-04-12-warn');
          var btn=root.querySelector('.d04-04-12-btn');
          var used=3.2, max=5;
          function render(){
            var pct=Math.min(100, used/max*100);
            fill.style.width=pct+'%';
            txt.textContent=used.toFixed(1)+'GB / '+max+'GB';
            fill.classList.toggle('is-warn', pct>=70 && pct<90);
            fill.classList.toggle('is-danger', pct>=90);
            warn.textContent = pct>=90 ? '容量が残りわずかです' : (pct>=70 ? 'まもなく上限に達します' : '');
          }
          render();
          btn.addEventListener('click',function(){
            used=Math.min(max, used+0.6);
            render();
            if(used>=max){
              setTimeout(function(){ used=3.2; render(); },1600);
            }
          });
        })();