%div.loader
- (1...26).each do |i|
%div
View Compiled
$size: 100px;
.loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: $size;
height: $size;
margin: auto;
div {
width: $size / 5;
height: $size / 5;
float: left;
animation: color_bitch 1s infinite ease;
border-radius: 50%;
}
@for $i from 1 through 25 {
div:nth-child(#{$i}) {
animation-delay: ($i / 5)+s;
animation-duration: ($i / 5)+s;
}
}
}
@keyframes color_bitch {
$hue: random();
0% {
background: transparent;
}
50% {
background:hsl($hue * 11 ,85%,70%);
}
100% {
background: transparent;
}
}
View Compiled
This Pen doesn't use any external CSS resources.