ul
	-for(var i=1;i<=5;i++)
		li

@mixin object($width, $height, $bg) {
	width: $width;
	height: $height;
	background: $bg;
}

@mixin transPos($top, $right, $bottom, $left,$transX,$transY) {
	position: absolute;
	top: $top;
	left: $left;
	right: $right;
	bottom: $bottom;
	transform:translate($transX,$transY);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

$colors :#42A5F5 #2196F3 #1E88E5 #1976D2 #1565C0;

body {
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
}

ul{
	display:flex;
	position:relative;
	width:90px;
	height:30px;
	li {
		@include object(30px,30px,null);
		border-radius:50%;
		position:absolute;
		left:0;
		transform:translatex(-50%);
		animation:load 1s cubic-bezier(.58,-0.15,.44,1.15) infinite alternate;
		@for $i from 1 through 5{
			&:nth-child(#{$i}){
				background:nth($colors,$i);
				animation-delay:0.1s * $i;
			}
		}
		@keyframes load {
			100%{
				left:100%;
			}
		}
	}
}