.loader{
    position: relative;
}

.dot{
    position: absolute;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: #DCDCDC;
}

.dot-1{
    left: -8px;
    animation-name: dot;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.dot-2{
    animation-name: dot;
    animation-duration: 1s;
    animation-delay: 0.15s;
    animation-iteration-count: infinite;
}

.dot-3{
    left: 8px;
    animation-name: dot;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
}

@keyframes dot {
    0% {
        background-color: #DCDCDC;
    }

    66% {
        background-color: #191919;
    }

    100% {
        background-color: #DCDCDC;
    }
}