ローディング
CSS

Dot Wave

3つのドットが波打つローディング。チャットUIの入力中表示に。

HTML
<div class="dot-wave">
  <span></span><span></span><span></span>
</div>
CSS
.dot-wave {
  display: flex;
  gap: 5px;
  align-items: center;
}
.dot-wave span {
  width: 7px; height: 7px;
  background: #1a1a1a;
  border-radius: 50%;
  animation: wave 1.4s ease-in-out infinite;
}
.dot-wave span:nth-child(2) { animation-delay: .15s; }
.dot-wave span:nth-child(3) { animation-delay: .3s; }
@keyframes wave {
  0%, 60%, 100% { transform: translateY(0); opacity: .3; }
  30% { transform: translateY(-8px); opacity: 1; }
}