SCSS
$color-primary: #97c900;
$color-secondary: #15668a;
$color-darkAccent: #D53A33;
$color-lightAccent: #E79C10;
$background: #222222;
$duration: 1.5s;
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: $background;
}
.loader {
display: block;
position: relative;
height: 20px;
width: 86px;
}
.loading-square {
position: absolute;
height: 20px;
width: 20px;
top: 0;
}
.loading-square:nth-child(1) {
left: 0;
animation: square1 $duration linear forwards infinite;
}
.loading-square:nth-child(2) {
left: 22px;
animation: square2 $duration linear forwards infinite;
}
.loading-square:nth-child(3) {
left: 44px;
animation: square3 $duration linear forwards infinite;
}
.loading-square:nth-child(4) {
left: 66px;
animation: square4 $duration linear forwards infinite;
}
@keyframes square1 {
0% {
background-color: $color-primary;
transform: translate(0, 0);
}
9.09091% {
transform: translate(0, calc(-100% - 2px));
background-color: $color-primary;
}
18.18182% {
transform: translate(calc(100% + 2px), calc(-100% - 2px));
background-color: $color-secondary;
}
27.27273% {
transform: translate(calc(100% + 2px), 0);
}
100% {
background-color: $color-secondary;
transform: translate(calc(100% + 2px), 0);
}
}
@keyframes square2 {
0% {
background-color: $color-secondary;
transform: translate(0, 0);
}
18.18182% {
transform: translate(0, 0);
}
27.27273% {
transform: translate(0, calc(100% + 2px));
background-color: $color-secondary;
}
36.36364% {
transform: translate(calc(100% + 2px), calc(100% + 2px));
background-color: $color-darkAccent;
}
45.45455% {
transform: translate(calc(100% + 2px), 0);
}
100% {
background-color: $color-darkAccent;
transform: translate(calc(100% + 2px), 0);
}
}
@keyframes square3 {
0% {
background-color: $color-darkAccent;
transform: translate(0, 0);
}
36.36364% {
transform: translate(0, 0);
}
45.45455% {
transform: translate(0, calc(-100% - 2px));
background-color: $color-darkAccent;
}
54.54545% {
transform: translate(calc(100% + 2px), calc(-100% - 2px));
background-color: $color-lightAccent;
}
63.63636% {
transform: translate(calc(100% + 2px), 0);
}
100% {
background-color: $color-lightAccent;
transform: translate(calc(100% + 2px), 0);
}
}
@keyframes square4 {
0% {
transform: translate(0, 0);
background-color: $color-lightAccent;
}
54.54545% {
transform: translate(0, 0);
}
63.63636% {
transform: translate(0, calc(100% + 2px));
background-color: $color-lightAccent;
}
72.72727% {
background-color: $color-darkAccent;
}
81.81818% {
background-color: $color-secondary;
}
90.90909% {
transform: translate(calc(-300% - 6px), calc(100% + 2px));
background-color: $color-primary;
}
100% {
transform: translate(calc(-300% - 6px), 0);
background-color: $color-primary;
}
}
