Rainbow loader

JADE
#rainbow -var i = 7 while i-- .arc
SCSS
$background: #FDFAD8; $colors: ( #E31D28, #ED8C3D, #FCD234, #3E9965, #295167, #492245, $background ); $arc-width: 35px; $arc-delay: 0.2s; $animation-duration: $arc-delay * length($colors); $rainbow-radius: $arc-width * length($colors); $rainbow-diameter: $rainbow-radius * 2; .arc { position: absolute; left: 50%; top: 50%; border-radius: 50%; animation: spin ease $animation-duration infinite both; @for $i from 1 through length($colors) { &:nth-child(#{$i}) { $radius: (length($colors) - $i + 1) * $arc-width; $diameter: $radius * 2; $delay: (length($colors) - $i) * $arc-delay; background: nth($colors, $i); width: $diameter; height: $diameter; margin-left: -$radius; margin-top: -$radius; clip: rect(0 $diameter $radius 0); animation-delay: $delay; } } } #rainbow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: $rainbow-diameter; height: $rainbow-diameter; } @keyframes spin { from { transform: rotateZ(-180deg); } to { transform: rotateZ(180deg); } } body { background: $background; overflow: hidden; }
JAVASCRIPT
Expand for more options Login