パーツ番号 09-09-10 ・ CSSのみ

接続強度インジケーター(静止・電波風)

電波強度やWi-Fi接続品質を棒グラフ状に示す静止表示です。ステータスバーや接続情報画面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-10-wrap">
          <div class="d09-09-10-signal">
            <span class="d09-09-10-bar d09-09-10-b1 d09-09-10-on"></span>
            <span class="d09-09-10-bar d09-09-10-b2 d09-09-10-on"></span>
            <span class="d09-09-10-bar d09-09-10-b3 d09-09-10-on"></span>
            <span class="d09-09-10-bar d09-09-10-b4 d09-09-10-off"></span>
          </div>
          <span class="d09-09-10-cap">強</span>
          <div class="d09-09-10-signal">
            <span class="d09-09-10-bar d09-09-10-b1 d09-09-10-on"></span>
            <span class="d09-09-10-bar d09-09-10-b2 d09-09-10-on"></span>
            <span class="d09-09-10-bar d09-09-10-b3 d09-09-10-off"></span>
            <span class="d09-09-10-bar d09-09-10-b4 d09-09-10-off"></span>
          </div>
          <span class="d09-09-10-cap">中</span>
          <div class="d09-09-10-signal">
            <span class="d09-09-10-bar d09-09-10-b1 d09-09-10-on"></span>
            <span class="d09-09-10-bar d09-09-10-b2 d09-09-10-off"></span>
            <span class="d09-09-10-bar d09-09-10-b3 d09-09-10-off"></span>
            <span class="d09-09-10-bar d09-09-10-b4 d09-09-10-off"></span>
          </div>
          <span class="d09-09-10-cap">弱</span>
        </div>

CSS

.d09-09-10-wrap{display:flex;align-items:flex-end;gap:10px;font-family:sans-serif}
        .d09-09-10-signal{display:flex;align-items:flex-end;gap:3px;height:26px}
        .d09-09-10-bar{display:inline-block;width:6px;border-radius:1px}
        .d09-09-10-b1{height:8px}
        .d09-09-10-b2{height:14px}
        .d09-09-10-b3{height:20px}
        .d09-09-10-b4{height:26px}
        .d09-09-10-on{background:#3b82f6}
        .d09-09-10-off{background:#e5e7eb}
        .d09-09-10-cap{font-size:11px;color:#6b7280;margin-right:6px}

クラス名 .d09-09-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。