45 lines
899 B
SCSS
45 lines
899 B
SCSS
@import "../_base.scss"
|
|
|
|
$background-height: 128px;
|
|
$background-width: 384px;
|
|
$logo-height: calc(32px * 2);
|
|
$logo-width: calc(64px * 2);
|
|
$logo-aspect-ratio: calc($logo-width / $logo-height);
|
|
|
|
.spinner {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
svg {
|
|
$fps: 4;
|
|
$duration_sec: 3;
|
|
$steps: calc($duration_sec * $fps);
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
fill: $color-primary-100;
|
|
stroke: $greyscale-90;
|
|
|
|
animation: 3s multicolor linear infinite;
|
|
animation-timing-function: steps($steps, end);
|
|
|
|
@keyframes multicolor {
|
|
0% {
|
|
fill: $color-primary-100;
|
|
}
|
|
33% {
|
|
fill: $color-secondary-100;
|
|
}
|
|
66% {
|
|
fill: $color-ternary-100;
|
|
}
|
|
}
|
|
|
|
&.paused {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
}
|
|
}
|