同期待ちアイテム数を示すバッジ

<div class="d11-14-10-wrap">
          <div class="d11-14-10-frame">
            <div class="d11-14-10-iconwrap">
              <svg class="d11-14-10-cloud" viewBox="0 0 24 24" width="34" height="34"><path d="M7 18a4.5 4.5 0 01-.4-8.98A5.5 5.5 0 0117.3 8.2 4 4 0 0117 16H7z" fill="none" stroke="#9ca3af" stroke-width="1.8"/></svg>
              <span class="d11-14-10-badge" id="d1966Badge">0</span>
            </div>
            <p class="d11-14-10-status" id="d1966Status">オンライン・同期済みです</p>
          </div>
          <button type="button" class="d11-14-10-toggle" id="d1966Toggle">オフラインで操作する</button>
        </div>

.d11-14-10-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
        .d11-14-10-frame{width:100%;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-10-iconwrap{position:relative;display:inline-flex}
        .d11-14-10-badge{position:absolute;top:-6px;right:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .25s ease}
        .d11-14-10-badge.show{transform:scale(1)}
        .d11-14-10-status{margin:0;font-size:11.5px;font-weight:700;color:#374151;text-align:center}
        .d11-14-10-toggle{margin-top:2px;width:100%;padding:9px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s}
        .d11-14-10-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-10');
        var badge=root.querySelector('#d1966Badge');
        var status=root.querySelector('#d1966Status');
        var btn=root.querySelector('#d1966Toggle');
        var offline=false,count=0,timer=null;
        var MAXQ=5;
        btn.addEventListener('click',function(){
          offline=!offline;
          if(offline){
            btn.textContent='オンラインに戻す';
            status.textContent='オフライン・操作をキューに保存しています';
            timer=setInterval(function(){
              if(count<MAXQ){
                count++;
                badge.textContent=String(count);
                badge.classList.add('show');
                status.textContent='オフライン・'+count+'件が同期待ちです';
              }
            },1300);
          }else{
            if(timer)clearInterval(timer);
            if(count>0){
              status.textContent='同期完了しました';
              setTimeout(function(){
                count=0;
                badge.classList.remove('show');
                status.textContent='オンライン・同期済みです';
              },900);
            }else{
              status.textContent='オンライン・同期済みです';
            }
            btn.textContent='オフラインで操作する';
          }
        });
      })();