SCSS
$loader-color: #3498db;
$loader-size: 120px;
body {
background: #333;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#square-loader {
height: $loader-size;
width: $loader-size*2;
position: relative;
.box {
width: $loader-size/2;
height: $loader-size/2;
float: left;
animation: scale 1s linear infinite;
&.one {
background: lighten($loader-color, 10%);
animation-delay: 0.1s;
}
&.two {
background: $loader-color;
animation-delay: 0.2s;
}
&.three {
background: darken($loader-color, 5%);
animation-delay: 0.3s;
}
&.four {
background: darken($loader-color, 10%);
animation-delay: 0.4s;
}
}
}
@keyframes scale {
25% {transform: scale(1);}
50% {transform: scale(1);}
75% {transform: scale(1.2);}
100% {transform: scale(1);}
}
