パルス円ローダー
パルス円ローダーは、円が広がりながら薄れていく「波紋」を 2 つ時間差で重ねた表現です。2 つの span を同じ位置に absolute で重ね、 transform:scale を 0 から 1 へ、 opacity を高い値から 0 へ動かす @keyframes を掛けています。
解説
パルス円ローダーは、円が広がりながら薄れていく「波紋」を 2 つ時間差で重ねた表現です。2 つの span を同じ位置に absolute で重ね、transform:scale を 0 から 1 へ、opacity を高い値から 0 へ動かす @keyframes を掛けています。2 つ目には animation-delay を入れているため、一方が消える頃にもう一方が広がり、脈打つような連続した呼吸感が生まれます。CSS のみで動きます。
使う場面と調整
通知の着信表示、地図のピン強調、待機中の控えめなインジケータなど、主張しすぎずに「動いている」と伝えたい場面に向きます。色は background、波紋の大きさは要素の width / height で決まります。広がりをゆっくりにしたいときは animation の秒数を伸ばします。
- 波の数を増やすなら
spanを足して遅延を分散 - 始点の濃さは
opacityの初期値 - 背景が暗い面では明るい色にすると視認性が上がる
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
波紋をもっと増やせますか。
span を 3 つ 4 つと増やし、それぞれ animation-delay を均等にずらせば、より連続した波になります。間隔は全体の秒数を波の数で割ると自然です。
色や大きさはどこで変えますか。
色は span の background、波紋の最大サイズは親要素の width と height で決まります。ゆっくり広げたいときは plPulse の animation 秒数を伸ばしてください。