パーツ番号 09-02-11 ・ CSSのみ

システムステータスインジケータ

各サービスの稼働状況を色付きドットで一覧表示するパネル。正常時は緑がゆっくり点滅。WordPressの管理者向けステータスページやシステム監視表示に。

autocss

プレビュー

ソースコード

HTML

<div class="d09-02-11-panel">
          <p class="d09-02-11-h">システムステータス</p>
          <div class="d09-02-11-row"><span class="d09-02-11-dot d09-02-11-ok"></span>Webサイト<span class="d09-02-11-st">稼働中</span></div>
          <div class="d09-02-11-row"><span class="d09-02-11-dot d09-02-11-ok"></span>決済システム<span class="d09-02-11-st">稼働中</span></div>
          <div class="d09-02-11-row"><span class="d09-02-11-dot d09-02-11-warn"></span>メール配信<span class="d09-02-11-st d09-02-11-warnt">遅延あり</span></div>
        </div>

CSS

.d09-02-11-panel{width:100%;max-width:280px;background:#fff;border:1px solid #e5e8f0;border-radius:12px;padding:16px 18px}
        .d09-02-11-h{margin:0 0 12px;font-size:13px;font-weight:700;color:#1f2430}
        .d09-02-11-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px;color:#3a4152}
        .d09-02-11-dot{width:9px;height:9px;border-radius:50%;flex:none;position:relative}
        .d09-02-11-ok{background:#2fa85e}
        .d09-02-11-ok::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2fa85e;animation:d1553pulse 2s ease-out infinite}
        .d09-02-11-warn{background:#e6a411}
        @keyframes d1553pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
        .d09-02-11-st{margin-left:auto;font-size:11px;color:#94a3b8}
        .d09-02-11-warnt{color:#9a6b04;font-weight:600}

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