ローディング
CSS

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; }
}