72 lines
1.1 KiB
SCSS
72 lines
1.1 KiB
SCSS
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 100px auto;
|
|
|
|
.loading-spinner-square {
|
|
width: 33%;
|
|
height: 33%;
|
|
background-color: $primary;
|
|
float: left;
|
|
animation: loading-spinner-squareGridScaleDelay 1.3s infinite ease-in-out;
|
|
}
|
|
|
|
.loading-spinner-square1 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.loading-spinner-square2 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.loading-spinner-square3 {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.loading-spinner-square4 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.loading-spinner-square5 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.loading-spinner-square6 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.loading-spinner-square7 {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.loading-spinner-square8 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.loading-spinner-square9 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes loading-spinner-squareGridScaleDelay {
|
|
0%,
|
|
70%,
|
|
100% {
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes loading-spinner-squareGridScaleDelay {
|
|
0%,
|
|
70%,
|
|
100% {
|
|
transform: scale3D(1, 1, 1);
|
|
}
|
|
35% {
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|