SCSS
$blue:#4885ed;
$red:#db3236;
$yellow:#f4c20d;
$green:#3cba54;
$background:lightyellow;
@mixin flex($flex,$center){
display:$flex;
justify-content:$center;
align-items:$center;
display:-webkit-$flex;
display:-ms-$flex;
display:$flex;
-webkit-justify-content:$center;
-ms-flex-pack:$center;
justify-content:$center;
-webkit-align-items:$center;
-ms-flex-align:$center;
align-items:$center;
}
@mixin shape($size){
width:$size;
height:$size;
}
@mixin border($style,$width,$border-top-color,$border-right-color,$border-bottom-color,$border-left-color){
border-style:$style;
border-width:$width;
border-top-color:$border-top-color;
border-right-color:$border-right-color;
border-bottom-color:$border-bottom-color;
border-left-color:$border-left-color;
}
body{
background:$background;
height:100vh;
@include flex(flex,center);
overflow:hidden;
}
.load1{
@include shape(200px);
@include border(solid,3px,$blue,$background,$background,$blue);
border-radius:50%;
@include flex(flex,center);
animation:spin1 1.8s linear infinite;
}
.load2{
@include shape(180px);
@include border(solid,3px,$background,$red,$red,$background);
border-radius:50%;
@include flex(flex,center);
animation: spin2 1.2s linear infinite;
}
.load3{
@include shape(160px);
@include border(solid,3px,$yellow,$background,$background,$yellow);
border-radius:50%;
@include flex(flex,center);
animation:spin1 1.4s linear infinite;
}
.load4{
@include shape(140px);
@include border(solid,3px,$background,$blue,$blue,$background);
border-radius:50%;
@include flex(flex,center);
animation:spin2 1.6s linear infinite;
}
.load5{
@include shape(120px);
@include border(solid,3px,$green,$background,$background,$green);
border-radius:50%;
@include flex(flex,center);
animation:spin1 2s linear infinite;
}
.load6{
@include shape(100px);
@include border(solid,3px,$background,$red,$red,$background);
border-radius:50%;
// @include flex(flex,center);
// position:relative;
animation:spin2 2.3s linear infinite;
}
.fa{
position:fixed;
font-size:2.3em;
color:$blue;
animation:colorchange 5s 0s linear infinite;
}
@keyframes spin1{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes spin2{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(-360deg);
}
}
@keyframes colorchange{
10%{
color:$blue;
}
20%{
color:$red;
}
40%{
color:$yellow;
}
60%{
color:$blue;
}
80%{
color:$green;
}
90%{
color:$red;
}
100%{
color:$blue;
}
}
