Inspired by this gif: http://codepen.io/FilipVitas/pen/aNLgZz
A Pen by Andreas Borgen on CodePen.
<div class="loader"></div> |
Inspired by this gif: http://codepen.io/FilipVitas/pen/aNLgZz
A Pen by Andreas Borgen on CodePen.
$piece-colors: (red, orange, dodgerblue, limegreen, white, yellow); | |
$piece-size: 100px; | |
$pad-factor: .01; | |
$anim: 5s ease infinite; | |
@mixin piece-state($piece, $state, $color: nth($piece-colors, $piece)) { | |
$angle: if($piece == 1, if($state == 1, 0deg, -90deg), | |
if($state == 1, 90deg, 0deg)); | |
transform: rotateY($angle); | |
background: $color; | |
box-shadow: -$piece-size 0 $color, $piece-size 0 $color; | |
} | |
.loader { | |
position: relative; | |
width: $piece-size; | |
height: $piece-size; | |
//background: rgba(gold, .5); | |
box-shadow: (-$piece-size) (-$piece-size) 0 (-$piece-size*$pad-factor) nth($piece-colors, 1), | |
0 (-$piece-size) 0 (-$piece-size*$pad-factor) nth($piece-colors, 5), | |
$piece-size (-$piece-size) 0 (-$piece-size*$pad-factor) nth($piece-colors, 3), | |
(-$piece-size) $piece-size 0 (-$piece-size*$pad-factor) nth($piece-colors, 3), | |
0 $piece-size 0 (-$piece-size*$pad-factor) nth($piece-colors, 4), | |
$piece-size $piece-size 0 (-$piece-size*$pad-factor) nth($piece-colors, 6);; | |
transform-style: preserve-3d; | |
transform: perspective($piece-size*5) rotateX(-17deg) rotateY(-17deg); | |
&::before, &::after { | |
content: ''; | |
display: block; | |
position: absolute; | |
top: $piece-size*$pad-factor; left: $piece-size*$pad-factor; | |
width: $piece-size * (1 - 2*$pad-factor); | |
height: $piece-size * (1 - 2*$pad-factor); | |
background: lime; | |
transform-origin: 50% 50% (-$piece-size*1.5); | |
@include piece-state(1, 1); | |
animation: rotate-1 $anim; | |
} | |
&::after { | |
background: tomato; | |
@include piece-state(2, 1); | |
animation-name: rotate-2; | |
} | |
@keyframes rotate-1 { | |
0%, 100% { @include piece-state(1, 1, nth($piece-colors, 1)); } | |
20%, 24.99% { @include piece-state(1, 2, nth($piece-colors, 1)); } | |
25% { @include piece-state(1, 1, nth($piece-colors, 2)); } | |
45%, 49.99% { @include piece-state(1, 2, nth($piece-colors, 2)); } | |
50% { @include piece-state(1, 1, nth($piece-colors, 3)); } | |
70%, 74.99% { @include piece-state(1, 2, nth($piece-colors, 3)); } | |
75% { @include piece-state(1, 1, nth($piece-colors, 4)); } | |
95%, 99.99% { @include piece-state(1, 2, nth($piece-colors, 4)); } | |
} | |
@keyframes rotate-2 { | |
0%, 100% { @include piece-state(2, 1, nth($piece-colors, 2)); } | |
20%, 24.99% { @include piece-state(2, 2, nth($piece-colors, 2)); } | |
25% { @include piece-state(2, 1, nth($piece-colors, 3)); } | |
45%, 49.99% { @include piece-state(2, 2, nth($piece-colors, 3)); } | |
50% { @include piece-state(2, 1, nth($piece-colors, 4)); } | |
70%, 74.99% { @include piece-state(2, 2, nth($piece-colors, 4)); } | |
75% { @include piece-state(2, 1, nth($piece-colors, 1)); } | |
95%, 99.99% { @include piece-state(2, 2, nth($piece-colors, 1)); } | |
} | |
} | |
/* Not important */ | |
.demo body { | |
display: flex; | |
height: 100vh; | |
margin: 0; | |
background: #111; | |
overflow: hidden; | |
align-items: center; | |
justify-content: center; | |
} |