.loader {
    display: flex;
    height: 50px;
}

.ball {
    width: 5px;
    height: 5px;
    margin: 0 5px;
    background-color: #333;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
/* 为每个小球添加不同的动画延迟 */
.ball:nth-child(2) { animation-delay: -1.2s; }
.ball:nth-child(3) { animation-delay: -1s; }
.ball:nth-child(4) { animation-delay: -0.8s; }
.ball:nth-child(5) { animation-delay: -0.6s; }
.ball:nth-child(6) { animation-delay: -0.4s; }
.ball:nth-child(7) { animation-delay: -0.2s; }

@keyframes bounce {
    0% { transform: rotate(0deg) scale(0); }
    80% { transform: rotate(360deg) scale(1.0); }
    100% { transform: rotate(360deg) scale(0); }
}

.ball {
    background-color: transparent;
    border: 2px solid #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: bounce 1.4s infinite ease-in-out both, changeColor 1.4s infinite linear;
}

@keyframes changeColor {
    0%, 100% { border-color: #333; }
    25% { border-color: rgb(6, 180, 114); }
    50% { border-color: #0f0; }
    75% { border-color: rgb(13, 232, 10); }
}