ハートビートローダー

解説

ハートビートローダーは、心臓が脈打つようにハートが拡大縮小を繰り返す表現です。マークはインライン svg で描かれ、fill:currentColor なので color を変えるだけで色が変わります。動きは transform:scale を @keyframes の 14% と 42% で 2 回跳ねさせ、心電図のような「ドクン・ドクン」という二拍のリズムを再現しています。CSS のみで JavaScript は不要、aria-hidden も付いています。

向く場面とカスタマイズ

医療・ヘルスケア・フィットネス系の待ち時間表示や、いいね送信中の演出などに合います。色は color、サイズは font-size（1em 基準の SVG）で調整します。鼓動を速めたいときは animation の秒数を縮めますが、速すぎると不安感が出るため落ち着いた速度が無難です。

• 色は color 一箇所、大きさは font-size
• 拍の強さは scale の上限値
• 無限アニメなので prefers-reduced-motion で静止させる配慮を推奨

使用例・適したシーン

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