IMPR: Minor loading improvements

This commit is contained in:
Tony Air 2023-11-22 02:19:16 +02:00
parent c674bf539d
commit d2a2513837
3 changed files with 72 additions and 38 deletions

View File

@ -1,51 +1,62 @@
// pulse
@keyframes pulse {
0% {
transform: scale(1);
}
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
@keyframes fade {
0% {
filter: grayscale(0);
0% {
filter: grayscale(0);
opacity: 1;
}
opacity: 1;
}
50% {
filter: grayscale(1);
50% {
filter: grayscale(1);
opacity: .5;
}
opacity: .5;
}
100% {
filter: grayscale(0);
100% {
filter: grayscale(0);
opacity: 1;
}
opacity: 1;
}
}
@keyframes expand {
from {
max-height: 0;
overflow: hidden;
}
from {
max-height: 0;
overflow: hidden;
}
to {
max-height: 500rem;
max-height: 200vh;
overflow: visible;
}
to {
max-height: 100vh;
overflow: visible;
}
}
@keyframes shrink {
to {
max-height: 0;
overflow: hidden;
}
from {
max-height: 100vh;
overflow: visible;
}
}
.no-transition {
transition: none!important;
transition: none !important;
}

View File

@ -4,6 +4,10 @@ body {
min-height: 100vh;
}
html {
overflow-y: scroll; // prevent content jumps produced by scroll bar
}
// sticky footer
body {
display: flex;
@ -16,6 +20,7 @@ body {
--body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
--body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
--body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
overflow-y: hidden; // prevent content jumps produced by scroll bar
.wrapper {
flex: 1 0 auto;
@ -29,6 +34,7 @@ body {
}
@media (min-width: $extra-large-screen) {
html,
body {
font-size: 0.9vw !important;
@ -95,12 +101,13 @@ option,
a,
.a,
.btn {
&:hover,
&.active {
opacity: 0.8;
> .fa,
> .svg-inline--fa {
>.fa,
>.svg-inline--fa {
transform: scale(1.5);
}
}
@ -114,8 +121,8 @@ a,
[data-toggle][aria-expanded="true"] {
opacity: 0.8;
> .fa,
> .svg-inline--fa {
>.fa,
>.svg-inline--fa {
transform: scale(1.5);
}
}

View File

@ -6,6 +6,22 @@
animation: fade 0.5s linear infinite;
}
// slower animation speed for big objects
.carousel__img.loading {
animation: fade 3s linear infinite;
}
main.loading {
animation: shrink 0.5s linear 1;
max-height: 0;
overflow: hidden;
}
main.loaded {
animation: expand 0.5s linear 1;
max-height: fit-content;
}
.graphql-page {
&.response-404 {
cursor: not-allowed;