Pulse Ring
同心円がパルスする洗練ローディング。ダッシュボードに。
HTML
<div class="pulse-ring"> <div class="ring r1"></div> <div class="ring r2"></div> <div class="ring r3"></div> </div>
CSS
.pulse-ring {
position: relative;
width: 60px; height: 60px;
}
.ring {
position: absolute;
inset: 0;
border: 1.5px solid #1a1a1a;
border-radius: 50%;
opacity: 0;
animation: pulse 2s cubic-bezier(0,.6,.5,1) infinite;
}
.r2 { animation-delay: .4s; }
.r3 { animation-delay: .8s; }
@keyframes pulse {
0% { transform: scale(.5); opacity: 0; }
30% { opacity: .4; }
100% { transform: scale(1.6); opacity: 0; }
}