Orbit Spinner
軌道を回る2つのドット。APIレスポンス待ちに。
HTML
<div class="orbit"> <div class="orbit-dot d1"></div> <div class="orbit-dot d2"></div> </div>
CSS
.orbit {
position: relative;
width: 40px;
height: 40px;
animation: orbit-spin 1.5s linear infinite;
}
.orbit-dot {
position: absolute;
width: 8px;
height: 8px;
background: #1a1a1a;
border-radius: 50%;
}
.d1 { top: 0; left: 50%; transform: translateX(-50%); }
.d2 { bottom: 0; left: 50%; transform: translateX(-50%); opacity: .3; }
@keyframes orbit-spin {
to { transform: rotate(360deg); }
}