58 lines
1.1 KiB
SCSS
58 lines
1.1 KiB
SCSS
.loading:after {
|
|
content: '.';
|
|
animation: dots 1s steps(5, end) infinite;
|
|
}
|
|
|
|
@keyframes dots {
|
|
0%,
|
|
20% {
|
|
color: rgba(var(--iqser-accent-rgb), 0);
|
|
text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
|
}
|
|
40% {
|
|
color: #283241;
|
|
text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
|
}
|
|
60% {
|
|
text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0);
|
|
}
|
|
80%,
|
|
100% {
|
|
text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
|
|
}
|
|
}
|
|
|
|
.spinning-icon {
|
|
animation-name: spin;
|
|
animation-duration: 5000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
|
|
height: fit-content;
|
|
width: fit-content;
|
|
|
|
> mat-icon {
|
|
width: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.animate-flicker {
|
|
animation: fadeIn 0.8s infinite alternate;
|
|
}
|