对话的 ...
加载动画,直接用 CSS 就可以实现,样式可以自己改,逻辑大差不差
<div class="loading-text">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
</div>
.loading-text {
> span {
display: inline-block;
width: 10px;
height: 10px;
background-color: $color;
border-radius: 50%;
& + span {
margin-left: 5px;
}
}
.dot1 {
animation: dot 1s infinite;
}
.dot2 {
animation: dot 1s infinite 0.2s;
}
.dot3 {
animation: dot 1s infinite 0.4s;
}
.dot4 {
animation: dot 1s infinite 0.6s;
}
@keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}