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