.loading-dots {
    width: 56px;
    height: 13.4px;
    background: radial-gradient(circle closest-side, #ffffff 90%,#0000) 0% 50%, radial-gradient(circle closest-side,#ffffff 90%,#0000) 50% 50%, radial-gradient(circle closest-side,#ffffff 90%,#0000) 100% 50%;
    background-size: calc(100%/3) 100%;
    background-repeat: no-repeat;
    animation: loading-dots-anim 1s infinite linear;
}

@keyframes loading-dots-anim {
    33% {
        background-size: calc(100%/3) 0%,calc(100%/3) 100%,calc(100%/3) 100%;
    }

    50% {
        background-size: calc(100%/3) 100%,calc(100%/3) 0%,calc(100%/3) 100%;
    }

    66% {
        background-size: calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%;
    }
}