css-only-loader.scss

$ease-in-out: ease-in-out;
$wait: 1000ms;
$stagger: 80ms;
$duration: 2000ms;

.cs-loader {
    color: $color-pink;
    text-align: center;
}

.cs-loader i {
    font-size: 30px;
    margin: 0;
    opacity: 0;
    display: inline-block;
}

@keyframes lol {
    0% {
        opacity: 0;
        transform: translateX(-150px);
    }
    33% {
        opacity: 1;
        transform: translateX(0px);
    }
    66% {
        opacity: 1;
        transform: translateX(0px);
    }
    100% {
        opacity: 0;
        transform: translateX(150px);
    }
}

.cs-loader i:nth-child(5) {
    animation: lol $duration $wait infinite $ease-in-out;
}

.cs-loader i:nth-child(4) {
    animation: lol $duration $wait + $stagger infinite $ease-in-out;
}

.cs-loader i:nth-child(3) {
    animation: lol $duration $wait + $stagger*2 infinite $ease-in-out;
}

.cs-loader i:nth-child(2) {
    animation: lol $duration $wait + $stagger*3 infinite $ease-in-out;
}

.cs-loader i:nth-child(1) {
    animation: lol $duration $wait + $stagger*4 infinite $ease-in-out;
}

template.html

 <div class="cs-loader">
 	<i class="transport"></i>
 	<i class="transport"></i>
 	<i class="transport"></i>
 	<i class="transport"></i>
 	<i class="transport"></i>
 </div>