バイラル達成メーター

<div class="d06-04-06-wrap">
          <p class="d06-04-06-text">あと<strong class="d06-04-06-remain">100</strong>いいねでランクアップ!</p>
          <div class="d06-04-06-bar"><div class="d06-04-06-fill"></div></div>
          <span class="d06-04-06-pct">0%</span>
        </div>

.d06-04-06-wrap { width:100%; max-width:220px; display:flex; flex-direction:column; gap:8px; align-items:center; }
        .d06-04-06-text { font-size:12px; color:#374151; text-align:center; margin:0; }
        .d06-04-06-text strong { color:#ec4899; font-size:15px; }
        .d06-04-06-bar { width:100%; height:10px; border-radius:999px; background:#f1f5f9; overflow:hidden; }
        .d06-04-06-fill { height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#f472b6,#ec4899); transition:width .6s ease; }
        .d06-04-06-pct { font-size:11px; color:#9ca3af; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-06');
          var fill = root.querySelector('.d06-04-06-fill');
          var pct = root.querySelector('.d06-04-06-pct');
          var remain = root.querySelector('.d06-04-06-remain');
          var target = 100;
          var progress = 0;
          function tick(){
            progress += 6 + Math.random()*10;
            if(progress >= 100){ progress = 100; }
            fill.style.width = progress + '%';
            pct.textContent = Math.round(progress) + '%';
            remain.textContent = Math.max(0, Math.round(target - target*progress/100));
            if(progress >= 100){
              setTimeout(function(){ progress = 0; fill.style.width='0%'; pct.textContent='0%'; remain.textContent=target; setTimeout(tick, 900); }, 1200);
            } else {
              setTimeout(tick, 900);
            }
          }
          setTimeout(tick, 700);
        })();