レーダースキャンローダー

解説

レーダースキャンローダーは、円形のレーダー画面を扇形の光線がぐるりと回る「探索中」の演出です。CSS のみで実装し、JavaScript は使いません。外円と ::before の内円で同心円のレーダー盤を描き、::after に conic-gradient（円錐グラデーション）で 60 度ほどの扇形ビームを作って、@keyframes の rotate(360deg) で等速回転させています。暗い紺色の背景に水色のビームが映えるよう配色されています。

使いどころ

• 地図・位置情報の「周辺を検索しています」表示
• セキュリティスキャンやネットワーク探索の進行中
• 「データを探しています」といった検索待機

ビームの色は conic-gradient の #0ff、レーダー盤の線は rgba(0,255,255,...) で調整します。扇の幅を広げたいときはグラデーションの 60deg を大きくします。回転スピードは animation の 2s で変更可能です。conic-gradient は新しめのブラウザで使えますが、最新 2 世代の主要ブラウザならまず問題ありません。常時回転するため prefers-reduced-motion での停止も検討してください。

使用例・適したシーン

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