preload.css

.ball-loader {
    width: 100px;
    height: 23.33333px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.ball-loader-ball {
    will-change: transform;
    height: 23.33333px;
    width: 23.33333px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    animation: grow 1s ease-in-out infinite alternate;
}

.ball-loader-ball.ball1 {
    left: 0;
    transform-origin: 100% 50%;
}

.ball-loader-ball.ball2 {
    left: 50%;
    transform: translateX(-50%) scale(1);
    animation-delay: 0.33s;
}

.ball-loader-ball.ball3 {
    right: 0;
    animation-delay: 0.66s;
}

@keyframes grow {
    to {
        transform: translateX(-50%) scale(0);
    }
}