Cascade Bars
バーが順番にカスケードするローダー。
HTML
<div class="cascade"> <span></span><span></span><span></span><span></span> </div>
CSS
.cascade {
display: flex;
gap: 3px;
align-items: center;
}
.cascade span {
width: 3px;
height: 20px;
background: #1a1a1a;
border-radius: 2px;
animation: cascade-move 1s ease-in-out infinite;
}
.cascade span:nth-child(1) { animation-delay: 0s; }
.cascade span:nth-child(2) { animation-delay: .15s; }
.cascade span:nth-child(3) { animation-delay: .3s; }
.cascade span:nth-child(4) { animation-delay: .45s; }
@keyframes cascade-move {
0%, 100% { transform: scaleY(1); opacity: .3; }
50% { transform: scaleY(1.8); opacity: 1; }
}