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

ステータスドット

在席・離席・取込中などを色付きのドットで表現。オンライン時のみ脈打つアニメーション付き。会員サイトやスタッフ紹介ページの在席表示に便利です。

autocss

プレビュー

ソースコード

HTML

<ul class="d09-01-01-list">
          <li><span class="d09-01-01-dot d09-01-01-on"></span>在席</li>
          <li><span class="d09-01-01-dot d09-01-01-away"></span>離席</li>
          <li><span class="d09-01-01-dot d09-01-01-busy"></span>取込中</li>
          <li><span class="d09-01-01-dot d09-01-01-off"></span>オフライン</li>
        </ul>

CSS

.d09-01-01{background:#fff}
        .d09-01-01-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15px;color:#333}
        .d09-01-01-list li{display:flex;align-items:center;gap:10px}
        .d09-01-01-dot{width:12px;height:12px;border-radius:50%;flex:none;position:relative}
        .d09-01-01-on{background:#22c55e}
        .d09-01-01-away{background:#f59e0b}
        .d09-01-01-busy{background:#ef4444}
        .d09-01-01-off{background:#9ca3af}
        .d09-01-01-on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:d09-01-01-pulse 1.6s ease-out infinite}
        @keyframes d09-01-01-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

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