.dots-container {
    margin-top: 84px;
    position: relative;
    width: 440px;
    height: 8px;
    margin: 84px auto 0;
}

.dots-container .dots {
    position: relative;
    width: 100%;
    height: 8px;
}

.dots-container .dots span {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0;
    left: 0;
}

.dots-container .dots span:after {
    content: "";
    position: absolute;
    display: block;
    background-color: #0067b8;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dots-container .dots span:nth-child(1) { animation-delay: 0s; }
.dots-container .dots span:nth-child(2) { animation-delay: 0.05s; }
.dots-container .dots span:nth-child(3) { animation-delay: 0.10s; }
.dots-container .dots span:nth-child(4) { animation-delay: 0.15s; }
.dots-container .dots span:nth-child(5) { animation-delay: 0.20s; }

.dots-container .dots.animate span {
    animation: move-dot 3s linear infinite;
}

@keyframes move-dot {
    0% {
        transform: translateX(44px);
        opacity: 0;
        animation-timing-function: linear;
    }
    2% {
        transform: translateX(44px);
        opacity: 1;
        animation-timing-function: linear;
    }
    48% {
        transform: translateX(220px);
        opacity: 1;
        animation-timing-function: step-end;
    }
    52% {
        transform: translateX(220px);
        opacity: 1;
        animation-timing-function: linear;
    }
    98% {
        transform: translateX(396px);
        opacity: 1;
    }
    100% {
        transform: translateX(396px);
        opacity: 0;
    }
}