パルスリング

解説

パルスリングは、中央の小さな丸から波紋のようなリングが外へ広がって消えていく、注目を集めるためのアニメーションです。仕組みは中心のドットの背後に ::before の疑似要素を重ね、@keyframes で transform:scale() によって拡大しながら opacity を 0 へ落としています。広がるほど薄くなることで、自然に溶けて消える波紋を表現しています。CSS のみで完結し、JavaScript は使っていません。

使うと効果的な場面

• 地図上のピンや「ここにいます」を示す現在地表示
• オンライン中や録音中などの状態を伝えるインジケーター
• クリックしてほしいボタンや新機能への注目誘導

色はドットと疑似要素の background をそろえて変え、波の速さは animation の秒数で、広がる大きさは scale の倍率で調整します。控えめにしたいときは倍率や不透明度を抑えると上品になります。常に動き続けるため、動きに敏感な利用者に配慮して prefers-reduced-motion がオンのときは波紋を止める指定を加えておくと親切です。意味のある状態を示すときは、色や動きだけに頼らず短い説明文も添えると、誰にでも伝わります。

使用例・適したシーン

• データ取得中の表示
• 送信ボタンクリック後のフィードバック
• 画像読み込み待ち