コインフリップローダー
コインフリップローダーは、丸いコインが縦軸を中心にくるくると回り続ける 3D ローダーです。CSS のみで動作し、JavaScript は不要です。 border-radius:50% で円にしたコインに linear-gradient で金属的なグラデーションをかけ、 @keyframes の rotateY(0…
解説
コインフリップローダーは、丸いコインが縦軸を中心にくるくると回り続ける 3D ローダーです。CSS のみで動作し、JavaScript は不要です。border-radius:50% で円にしたコインに linear-gradient で金属的なグラデーションをかけ、@keyframes の rotateY(0) から rotateY(360deg) まで回すことで、表と裏が入れ替わるコイン回転を表現しています。linear の等速指定により、引っかかりのない滑らかな回転になります。
こんなときに
- 決済処理中・購入完了待ちの画面
- ポイント付与やくじ引きなどゲーム的なリザルト待ち
- 軽快さを出したい一般的な読み込み中表示
大きさは .coin-load の幅・高さ（初期値 48px）で変わります。色みは linear-gradient の #fbb034 と #f5576c を差し替えるだけです。回転を速くしたいときは animation の 1s を短くします。平面のコインが回るだけなので軽量ですが、回転が止まらない表現のため、prefers-reduced-motion 環境では動きを抑える配慮があると親切です。
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
コインのサイズを変えたいです。
.coin-load の width と height を同じ値にして変更してください。円形を保つため縦横は必ずそろえます。
回転スピードは調整できますか？
できます。animation プロパティの 1s を小さくすると速く、大きくするとゆっくり回ります。