Radar Sweep Loader
conic-gradientでレーダーのスイープ表示を再現したローダー。
HTML
<div class="rsl-wrap"> <div class="rsl-radar"></div> </div>
CSS
.rsl-wrap {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #1e293b;
position: relative;
overflow: hidden;
}
.rsl-radar {
position: absolute;
inset: 0;
background: conic-gradient(from 0deg, transparent 0deg, rgba(99,102,241,0.4) 40deg, transparent 50deg);
border-radius: 50%;
animation: rsl-sweep 2s linear infinite;
}
@keyframes rsl-sweep {
to { transform: rotate(360deg); }
}
.rsl-wrap::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 6px; height: 6px;
background: #6366f1;
border-radius: 50%;
transform: translate(-50%, -50%);
}