加载中 ... 动画

<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