@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%;
}
}
}
}
View Compiled