加载中 ... 动画
<div className={styles.dotsContainer}>
<div className={styles.dot}></div>
<div className={styles.dot}></div>
<div className={styles.dot}></div>
</div>
// css
.dotsContainer {
display: flex;
padding: 6px 0;
.dot {
width: 8px;
height: 8px;
background-color: #000;
margin-right: 5px;
border-radius: 50%;
opacity: 0;
animation: dot-animation 2s infinite;
}
.dot:nth-child(2) {
animation-delay: 0.5s;
}
.dot:nth-child(3) {
animation-delay: 1s;
}
}
@keyframes dot-animation {
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
image.png
