Blurry Loader

HAML
.skew .loader -(1..64).each do %div
SASS
$c1: #3a405a $c2: #f9dec9 $t: 2.5s $d: $t / 128 $dim: 128px $bl-min: 0px $bl-max: 10px @keyframes anim 0%, 100% opacity: 0.3 50% filter: blur($bl-min) opacity: 1 transform: scale(0.7) * margin: 0 box-sizing: border-box body background-color: $c1 .skew transform: scaleX(0.8) .loader position: relative top: 50vh margin: -$dim/2 auto 0 auto height: $dim width: $dim transform: rotate(-135deg) .loader > div height: $dim / 8 width: $dim / 8 float: left background-color: $c2 filter: blur($bl-max) opacity: 0.3 animation: anim $t infinite linear @for $i from 1 through 64 .loader > div:nth-child(#{$i}) animation-delay: $d * $i
JAVASCRIPT
Expand for more options Login