オンライン中インジケータ（パルス）
このオンライン中インジケータは、小さな丸い点の周りに 外側へ広がって消える波紋 を出し、配信中やアクティブ状態を表すパルス表現です。点本体は span.pd__dot で、波紋は ::before 擬似要素を inset:-4px で少しだけ外側に重ね、 @keyframes でスケールを 0.5 倍から 2.2…
解説
このオンライン中インジケータは、小さな丸い点の周りに外側へ広がって消える波紋を出し、配信中やアクティブ状態を表すパルス表現です。点本体は span.pd__dot で、波紋は ::before 擬似要素を inset:-4px で少しだけ外側に重ね、@keyframes でスケールを 0.5 倍から 2.2 倍へ拡大しつつ不透明度を 0 に落として実現しています。animation:pdPulse 1.6s ease-out infinite でゆっくり繰り返すため、視線を奪いすぎない落ち着いた点滅になります。
使う場面
- ライブ配信やオンラインステータスの表示
- チャットやSNSの「相手がアクティブ」表示
- ダッシュボードでの稼働中・処理中インジケータ
このサンプルは状態を色で分けており、配信中は緑（#10b981）、取り込み中は橙（#f59e0b）で波紋を出し、オフラインは灰色にして波紋を display:none で止めています。色を変えるときは点本体と ::before の background を同じ値で揃えるのがコツです。動きを抑えたい場合は prefers-reduced-motion でアニメーションを止め、点の色だけで状態が伝わるようにしておくと親切です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
色（状態）を増やすにはどうしますか
pd__dot--busy のような修飾クラスを追加し、点本体のbackgroundと擬似要素のbackgroundを同じ色に指定すれば新しい状態を増やせます。波紋を止めたい状態は擬似要素をdisplay:noneにします。
点滅の速さは変えられますか
変えられます。animationのdurationである1.6sを大きくすればゆっくり、小さくすれば速くなります。広がりの最大サイズはキーフレームの拡大率（2.2倍）で調整できます。