Squares Loader Experiment
HTML
<div class="s s1"></div>
<div class="s s2"></div>
<div class="s s3"></div>
<div class="s s4"></div>
<div class="s s5"></div>
<div class="s s6"></div>
<div class="s s7"></div>
<div class="s s8"></div>
<div class="s s9"></div>
SCSS
@function posh($del) {
@return calc(50vw - #{$del})
}
@function posv($del) {
@return calc(50vh - #{$del})
}
$x: 25px;
$w: $x * 2;
$c: #34495e;
.s {
position: fixed;
width: $w;
height: $w;
background-color: $c;
transform: rotate(90deg);
// opacity: .1;
}
div.s {
animation-iteration-count: infinite;
// animation-timing-function: ease-out;
animation-duration: 2s;
animation-delay: -1s;
// animation-play-state: paused;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
// outline: 1px solid blue;
background-color: #333;
}
.s5 {
left: posh($w/2 );
top: posv($w/2 );
animation: a5 1s;
}
.s1 {
left: posh($w*1.5);
top: posv($w * 1.5);
animation: a1 1s;
background-color: #2ecc71;
}
.s2 {
left: posh($w/2);
top: posv($w*1.5);
animation: a2 1s;
background-color: #3498db;
}
.s3 {
left: posh($w/-2);
top: posv($w * 1.5);
animation: a3 1s;
background-color: #9b59b6;
}
.s4 {
left: posh($w * 1.5);
top: posv($w/2);
animation: a4 1s;
background-color: #f1c40f;
}
.s6 {
left: posh($w/-2);
top: posv($w/2);
animation: a6 1s;
background-color: #e74c3c;
}
.s7 {
left: posh($w * 1.5);
top: posv($w/-2);
animation: a7 1s;
background-color: #bdc3c7;
}
.s8 {
left: posh($w/2);
top: posv($w/-2);
animation: a8 1s;
background-color: #f39c12;
}
.s9 {
left: posh($w/-2);
top: posv($w/-2);
animation: a9 1s;
background-color: #1abc9c;
}
@keyframes a1 {
from {
left: -$w*3;
top: -$w*3;
transform: scale(3);
}
}
@keyframes a2 {
from {
left: posh($w/2);
top: -$w*3;
transform: scale(3);
}
}
@keyframes a3 {
from {
left: calc(100vw + #{$w});
top: -$w*3;
transform: scale(3);
}
}
@keyframes a4 {
from {
left: -$w*3;
top: posv($w/2);
transform: scale(3);
}
}
@keyframes a5 {
from {
transform: scale(3);
}
}
@keyframes a6 {
from {
left: calc(100vw + #{$w});
top: posv($w/2);
transform: scale(3);
}
}
@keyframes a7 {
from {
left: -$w * 3;
top: calc(100vh + #{$w});
transform: scale(3);
}
}
@keyframes a8 {
from {
left: posh($w/2);
top: calc(100vh + #{$w});
transform: scale(3);
}
}
@keyframes a9 {
from {
left: calc(100vw + #{$w});
top: calc(100vh + #{$w});
transform: scale(3);
}
}
