パルス効果ステータスドット
パルス効果ステータスドットは、暗い背景の上で 点から波紋が広がって消える ライブ状態の表示です。先のオンライン中インジケータと似た発想ですが、こちらは ::after 擬似要素を使い、 background:inherit で点本体と同じ色の波紋を出すのが特徴です。
解説
パルス効果ステータスドットは、暗い背景の上で点から波紋が広がって消えるライブ状態の表示です。先のオンライン中インジケータと似た発想ですが、こちらは ::after 擬似要素を使い、background:inherit で点本体と同じ色の波紋を出すのが特徴です。@keyframes pdRing でスケールを1倍から2.6倍まで大きく広げつつ不透明度を0へ落とし、1.5s で繰り返します。紺色（#0f1b3d）の背景に緑や赤の点が映え、配信や録画の進行を直感的に伝えます。
使う場面
- ライブ配信・録画中のステータス表示
- 動画プレイヤーやスタジオ風UIのインジケータ
- ダークテーマのダッシュボードでの稼働中表示
色は --live（緑）や --rec（赤）の修飾子で切り替え、background:inherit のおかげで波紋も自動で同じ色になります。新しい状態を足すときは点本体の色を1か所変えるだけで済むのが利点です。波紋の広がり量はキーフレームの最大スケール（2.6倍）で調整します。常時アニメーションするため、画面に複数並べると賑やかになりすぎます。重要な1か所に絞り、prefers-reduced-motion での停止も用意すると親切です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
波紋の色を点と別にできますか
このサンプルは擬似要素にbackground:inheritを指定しているため、波紋は常に点本体と同じ色になります。別の色にしたい場合は、inheritをやめて擬似要素のbackgroundに好きな色を直接指定してください。
明るい背景でも使えますか
使えます。サンプルは紺色の暗い背景前提ですが、点と波紋の色や明るさを背景に合わせて調整すれば、白い背景でも問題なく機能します。コントラストを確保すると状態が読み取りやすくなります。