.preloader{
    margin: 50px auto;
    text-align: center;
    --n: 5;
}

.dot{
    background: #e74c3c;
    --i: 0;
}

.dot:nth-child(2){
    background: #2ecc71;
    --i: 1;
}

.dot:nth-child(3){
    background: #3498db;
    --i: 2;
}

.dot:nth-child(4){
    background: #e67e22;
    --i: 3;
}

.dot:nth-child(5){
    background: #9b59b6;
    --i: 4;
}

.dot:after{
   --o: 1;
    background: #fff;
    content: "";
}

.dot, .dot:after {
    display: inline-block;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    animation: effect 1.5s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1.5s) infinite;
}

@keyframes effect{
    0%, 50%{ transform: scale(0); }
}