82 lines
2.1 KiB
SCSS
82 lines
2.1 KiB
SCSS
@import "colors";
|
|
|
|
.spinner-old {
|
|
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;
|
|
}
|
|
}
|
|
|
|
|
|
.spinner {
|
|
/* Add a loading spinner using the `::before` pseudo-element */
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border: 3px solid var(--text-default-grey);
|
|
border-radius: 50%;
|
|
border-top-color: var(--background-default-grey);
|
|
animation: spinner 0.7s cubic-bezier(0,0,.36,.78) infinite;
|
|
}
|
|
}
|
|
|
|
/* Add the keyframes for the spinner animation */
|
|
@keyframes spinner {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|