再接続試行中スピナー付きバナー

<div class="d11-14-04-wrap">
          <div class="d11-14-04-frame">
            <div class="d11-14-04-banner" id="d1960Banner">
              <span class="d11-14-04-spin" id="d1960Spin"></span>
              <span class="d11-14-04-msg" id="d1960Msg">オフラインです。再接続を試行中 (1/3)</span>
            </div>
            <div class="d11-14-04-body" id="d1960Body">
              <p class="d11-14-04-line">チャット: メッセージを送信できません</p>
              <p class="d11-14-04-line">下書きはローカルに保存されています</p>
            </div>
          </div>
          <button type="button" class="d11-14-04-toggle" id="d1960Toggle">接続を切断する</button>
        </div>

.prev.d11-14-04{align-items:flex-start;justify-content:flex-start}
        .d11-14-04-wrap{width:100%}
        .d11-14-04-frame{position:relative;height:150px;overflow:hidden;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-04-banner{position:absolute;top:0;left:0;right:0;transform:translateY(-100%);background:#374151;color:#fff;font-size:10.5px;font-weight:700;padding:9px 12px;display:flex;align-items:center;gap:8px;transition:transform .3s ease,background .3s ease;z-index:3}
        .d11-14-04-banner.show{transform:translateY(0)}
        .d11-14-04-banner.is-success{background:#059669}
        .d11-14-04-spin{width:14px;height:14px;border:2.4px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:block;flex:none}
        .d11-14-04-banner.is-success .d11-14-04-spin{display:none}
        .d11-14-04-banner.is-loading .d11-14-04-spin{animation:d1960Spin .7s linear infinite}
        @keyframes d1960Spin{to{transform:rotate(360deg)}}
        .d11-14-04-body{padding:16px 12px;display:flex;flex-direction:column;gap:8px;transition:opacity .3s}
        .d11-14-04-body.dim{opacity:.4}
        .d11-14-04-line{margin:0;font-size:11.5px;color:#374151;background:#fff;border:1px solid #eef0f3;border-radius:8px;padding:8px 10px}
        .d11-14-04-toggle{margin-top:10px;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-04-toggle:hover{background:#f3f4f6}
        .d11-14-04-toggle[disabled]{opacity:.5;cursor:default}

(function(){
        var root=document.querySelector('.d11-14-04');
        var banner=root.querySelector('#d1960Banner');
        var msg=root.querySelector('#d1960Msg');
        var body=root.querySelector('#d1960Body');
        var btn=root.querySelector('#d1960Toggle');
        btn.addEventListener('click',function(){
          if(btn.disabled)return;
          btn.disabled=true;
          btn.textContent='切断中…';
          body.classList.add('dim');
          banner.classList.remove('is-success');
          banner.classList.add('show','is-loading');
          var attempt=1,max=3;
          msg.textContent='オフラインです。再接続を試行中 ('+attempt+'/'+max+')';
          var timer=setInterval(function(){
            attempt++;
            if(attempt<=max){
              msg.textContent='オフラインです。再接続を試行中 ('+attempt+'/'+max+')';
            }
            if(attempt>=max){
              clearInterval(timer);
              banner.classList.remove('is-loading');
              banner.classList.add('is-success');
              msg.textContent='接続が復旧しました';
              setTimeout(function(){
                banner.classList.remove('show');
                body.classList.remove('dim');
                btn.disabled=false;
                btn.textContent='接続を切断する';
              },1000);
            }
          },900);
        });
      })();