60 lines
1.6 KiB
SCSS
60 lines
1.6 KiB
SCSS
@import "colors";
|
|
|
|
.spinner {
|
|
color: $black;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
text-indent: -9999em;
|
|
animation: load4 1.3s infinite linear;
|
|
transform: translateZ(0);
|
|
|
|
&.right {
|
|
position: absolute;
|
|
top: 3.7em;
|
|
right: 1.2em;
|
|
transform: scale(0.3);
|
|
}
|
|
|
|
&.left {
|
|
top: 1.2em;
|
|
left: 1.2em;
|
|
transform: scale(0.4);
|
|
}
|
|
}
|
|
|
|
@keyframes load4 {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
|
|
}
|
|
|
|
12.5% {
|
|
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
|
|
}
|
|
|
|
25% {
|
|
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
|
|
}
|
|
|
|
37.5% {
|
|
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
|
|
}
|
|
|
|
62.5% {
|
|
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
|
|
}
|
|
|
|
75% {
|
|
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
|
|
}
|
|
|
|
87.5% {
|
|
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
|
|
}
|
|
}
|