90 lines
2.1 KiB
SCSS
90 lines
2.1 KiB
SCSS
.spinner2 {
|
|
position: fixed;
|
|
width: 40px;
|
|
height: 40px;
|
|
top: calc(50% - 40px/2);
|
|
left: calc(50% - 40px/2);
|
|
.spinner-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
&.container2 {
|
|
transform: rotateZ(45deg);
|
|
}
|
|
&.container3 {
|
|
transform: rotateZ(90deg);
|
|
}
|
|
.circle1 { top: 0; left: 0; }
|
|
.circle2 { top: 0; right: 0; }
|
|
.circle3 { right: 0; bottom: 0; }
|
|
.circle4 { left: 0; bottom: 0; }
|
|
}
|
|
.container1,
|
|
.container2,
|
|
.container3 {
|
|
div {
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #fff;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
animation: bouncedelay 1.2s infinite ease-in-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
|
|
.container1 {
|
|
.circle2 {
|
|
animation-delay: -0.9s;
|
|
}
|
|
.circle3 {
|
|
animation-delay: -0.6s;
|
|
}
|
|
.circle4 {
|
|
animation-delay: -0.3s;
|
|
}
|
|
}
|
|
|
|
.container2 {
|
|
.circle1 {
|
|
animation-delay: -1.1s;
|
|
}
|
|
.circle2 {
|
|
animation-delay: -0.8s;
|
|
}
|
|
.circle3 {
|
|
animation-delay: -0.5s;
|
|
}
|
|
.circle4 {
|
|
animation-delay: -0.2s;
|
|
}
|
|
}
|
|
|
|
.container3 {
|
|
.circle1 {
|
|
animation-delay: -1.0s;
|
|
}
|
|
.circle2 {
|
|
animation-delay: -0.7s;
|
|
}
|
|
.circle3 {
|
|
animation-delay: -0.4s;
|
|
}
|
|
.circle4 {
|
|
animation-delay: -0.1s;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes bouncedelay {
|
|
0%, 80%, 100% {
|
|
transform: scale(0.0);
|
|
-webkit-transform: scale(0.0);
|
|
} 40% {
|
|
transform: scale(1.0);
|
|
-webkit-transform: scale(1.0);
|
|
}
|
|
} |