HTML
<div class='container'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
SCSS
// Sizing
$number: 5px;
$object: $number*85;
// Colors
$bg: #041A2E;
$primary: #1787E8;
$secondary: #D117E8;
// Mixins + animation
@mixin animation($animationName) {
-webkit-animation: #{$animationName};
-moz-animation: #{$animationName};
-o-animation: #{$animationName};
animation: #{$animationName};
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@mixin transform($params) {
-webkit-transform: $params;
-ms-transform: $params;
transform: $params;
}
body {
background: $bg;
}
.container {
border-radius: $object;
height: $object;
left: 0;
margin: 0 auto;
overflow: hidden;
position: absolute;
right: 0;
top: 50%;
@include transform(translateY(-50%));
width: $object;
}
.line {
background: $primary;
height: $number;
margin-bottom: $number;
width: $object;
}
@for $i from 0 through 51 {
$delay: #{($i*51)}ms;
.line:nth-child(#{$i}) {
@include animation(line-#{$i} 3s infinite $delay ease-in-out);
@include keyframes(line-#{$i}) {
0% { background: $primary;}
50% { background: $secondary;}
100% { background: $primary;}
}
}
}
