二重リングローダー
二重リングローダーは、向きの異なる 2 つのリングが回転する CSS のみのスピナーです。各 div は border の上下だけに色を付け、左右を transparent にすることで弧状のリングに見せています。
解説
二重リングローダーは、向きの異なる 2 つのリングが回転する CSS のみのスピナーです。各 div は border の上下だけに色を付け、左右を transparent にすることで弧状のリングに見せています。外側は 667eea、内側は position:absolute の inset:8px で一回り小さくし、animation-direction:reverse で逆回転、さらに回転速度も変えているため、二重の弧が交差するような動きになります。JavaScript は使いません。
使う場面と調整
データ取得待ち、ファイルアップロード中、画面遷移時など「完了時間が読めない処理」の表示に適しています。落ち着いた中にも動きがあるため、管理画面やフォーム送信中の表示にも馴染みます。サイズは外側の width / height を変え、内側の inset も比率を保って調整します。
- 2 色は外側と内側の
border-top-color/border-bottom-colorで変更 - 速さは
animation-duration、太さはborderの太さ - 無限回転なので
prefers-reduced-motionでは静止アイコンへ切り替える配慮を推奨
使用例・適したシーン
- データ取得中の表示
- 送信ボタンクリック後のフィードバック
- 画像読み込み待ち
よくある質問
色を 1 色に統一できますか。
できます。内側 div の border-top-color と border-bottom-color を外側と同じ色にすれば単色になります。逆に差を大きくすると二重リングの分離が際立ちます。
回転が速すぎる場合は。
各 div の animation-duration を大きくすると遅くなります。内側と外側でわずかに値を変えてあるので、両方を同じ割合で調整すると交差感を保ったまま落ち着かせられます。