Bar Wave Loader
5本のバーが波打つイコライザー風ローダー。
HTML
<div class="bar-wave"> <span></span><span></span><span></span><span></span><span></span> </div>
CSS
.bar-wave {
display: flex;
align-items: flex-end;
gap: 3px;
height: 32px;
}
.bar-wave span {
width: 4px;
background: #1a1a1a;
border-radius: 2px;
animation: bar-dance 1.2s ease-in-out infinite;
}
.bar-wave span:nth-child(1) { animation-delay: 0s; }
.bar-wave span:nth-child(2) { animation-delay: .1s; }
.bar-wave span:nth-child(3) { animation-delay: .2s; }
.bar-wave span:nth-child(4) { animation-delay: .3s; }
.bar-wave span:nth-child(5) { animation-delay: .4s; }
@keyframes bar-dance {
0%, 100% { height: 8px; opacity: .4; }
50% { height: 28px; opacity: 1; }
}