SCSS
$color: tomato;
$spectrum: 40%;
$duration: 1.50s;
$a: 0 0, 100% 100%, 0 100%;
$b: 100% 0, 100% 100%, 0 100%;
$c: 100% 0, 100% 100%, 0 0;
$d: 100% 0, 0 100%, 0 0;
$e: 100% 100%, 0 100%, 0 0;
@mixin path($path) {
-webkit-clip-path: polygon($path);
clip-path: polygon($path);
}
figure {
position: relative;
width: 50vmin;
height: 50vmin;
max-width: 150px;
max-height: 150px;
}
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $color;
background-image: radial-gradient(rgba($color, 0), rgba($color, .5));
animation: load $duration ease-in-out infinite both;
&:nth-child(2) { animation-delay: $duration*-.666; }
}
@keyframes load {
0% { @include path($a); }
25% {
@include path($b);
background-color: adjust-hue($color, $spectrum);
}
50% { @include path($c); }
75% {
@include path($d);
background-color: adjust-hue($color, -$spectrum);
}
100% { @include path($e); }
}
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#444, #111);
animation: spin $duration*10 infinite;
overflow: hidden;
}
@keyframes spin {
to { transform: rotate(1turn); }
}
