Create TikTok Like Loading Dots using Html CSS

				
					* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #e8e8e8;
}

.loader {
    display: flex;
}

.ball {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    mix-blend-mode: multiply;
}

.ball-1 {
    background-color: #fe2c55;
    animation: slide1 .7s ease-in-out infinite;
}

.ball-2 {
    background-color: #01f7ee;
    animation: slide2 .7s ease-in-out infinite;
}

@keyframes slide1 {

    0%,
    100% {
        transform: translateX(0);
        z-index: 1;
    }

    50% {
        transform: translateX(14px);
        z-index: 2;
    }
}

@keyframes slide2 {

    0%,
    100% {
        transform: translateX(0);
        z-index: 2;
    }

    50% {
        transform: translateX(-14px);
        z-index: 1;
    }
}