SCSS
$size : 30px;
$yellow_light : #FED750;
$yellow : #E6A32F;
$yellow_dark : #C87932;
$duration : 3s;
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
background:
radial-gradient(
#333,
#000
);
transform: translateY(-$size*1.5);
}
@mixin psuedo {
display: block;
content: "";
}
.loader {
display: inline-flex;
flex-wrap: wrap;
width: $size * 3;
height: $size * 3;
transform-style: preserve-3d;
transform: rotateX(45deg) rotate(45deg);
}
.box {
position: absolute;
top: 0;
left: 0;
width: $size;
height: $size;
background: $yellow_light;
box-shadow: $size*3.75 $size*3.75 20px #000;
animation: move $duration ease-in-out infinite both;
transform-style: preserve-3d;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
animation-delay: $i/2 * -$duration;
}
}
&:before, &:after {
@include psuedo;
position: absolute;
width: $size;
height: $size;
}
&:before {
top: 100%;
left: 0;
background: $yellow;
transform-origin: center top;
transform: rotateX(-90deg);
}
&:after {
top: 0;
left: 100%;
background: $yellow_dark;
transform-origin: center left;
transform: rotateY(90deg);
}
}
@keyframes move {
0%, 100% { transform: none; }
12.5% { transform: translate($size, 0); }
25% { transform: translate($size*2, 0); }
37.5% { transform: translate($size*2, $size); }
50% { transform: translate($size*2, $size*2); }
62.5% { transform: translate($size, $size*2); }
75% { transform: translate(0, $size*2); }
87.5% { transform: translate(0, $size); }
}
