接続速度インジケータ(強/中/弱バー)

<div class="d11-14-06-wrap">
          <div class="d11-14-06-frame">
            <div class="d11-14-06-signal lvl-strong" id="d1962Signal">
              <span class="d11-14-06-bar b1"></span>
              <span class="d11-14-06-bar b2"></span>
              <span class="d11-14-06-bar b3"></span>
            </div>
            <p class="d11-14-06-label" id="d1962Label">強・安定した接続です</p>
          </div>
          <button type="button" class="d11-14-06-toggle" id="d1962Toggle">回線状況を切り替える</button>
        </div>

.d11-14-06-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
        .d11-14-06-frame{width:100%;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:12px;background:#f8f9fb;border:1px solid #eef0f3}
        .d11-14-06-signal{display:flex;align-items:flex-end;gap:4px;height:32px}
        .d11-14-06-bar{display:block;width:9px;border-radius:3px;background:#e5e7eb;transition:background .25s}
        .d11-14-06-bar.b1{height:12px}
        .d11-14-06-bar.b2{height:21px}
        .d11-14-06-bar.b3{height:32px}
        .lvl-strong .b1,.lvl-strong .b2,.lvl-strong .b3{background:#10b981}
        .lvl-medium .b1,.lvl-medium .b2{background:#f59e0b}
        .lvl-weak .b1{background:#f97316}
        .d11-14-06-label{margin:0;font-size:11.5px;font-weight:700;color:#374151}
        .d11-14-06-toggle{margin-top:12px;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-06-toggle:hover{background:#f3f4f6}

(function(){
        var root=document.querySelector('.d11-14-06');
        var signal=root.querySelector('#d1962Signal');
        var label=root.querySelector('#d1962Label');
        var btn=root.querySelector('#d1962Toggle');
        var states=[
          {cls:'lvl-strong',text:'強・安定した接続です'},
          {cls:'lvl-medium',text:'中・やや不安定な接続です'},
          {cls:'lvl-weak',text:'弱・低速な接続です'},
          {cls:'lvl-offline',text:'オフライン・接続がありません'}
        ];
        var idx=0;
        btn.addEventListener('click',function(){
          idx=(idx+1)%states.length;
          signal.className='d11-14-06-signal '+states[idx].cls;
          label.textContent=states[idx].text;
        });
      })();