Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-21 00:52:43 -05:00
Code Issues Activity

chore(web): subtler spinner FOUC animation (#12090)

Browse source
This commit is contained in:
Alex 2024-08-28 08:20:56 -05:00 • committed by GitHub
parent cf272fc7fd
commit c44280a50b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/app.html
View file

@ -20,43 +20,27 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
body, body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@keyframes delayedVisibility { @keyframes delayedVisibility {
to { to {
visibility: visible; visibility: visible;
} }
} }
@keyframes stencil-pulse {
0% {
transform: scale(0.93);
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.7));
}
70% {
transform: scale(1);
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0));
}
100% {
transform: scale(0.93);
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
}
@keyframes loadspin { @keyframes loadspin {
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#stencil svg {
height: 35%;
animation: stencil-pulse 1s linear infinite;
}
#stencil { #stencil {
--stencil-width: 25vw; --stencil-width: 150px;
display: flex; display: flex;
width: var(--stencil-width); width: var(--stencil-width);
margin-left: auto; margin-left: auto;
@ -69,11 +53,13 @@
visibility: hidden; visibility: hidden;
animation: animation:
0s linear 0.3s forwards delayedVisibility, 0s linear 0.3s forwards delayedVisibility,
loadspin 2s linear infinite; loadspin 8s linear infinite;
} }
.bg-immich-bg { .bg-immich-bg {
background-color: white; background-color: white;
} }
.dark .dark\:bg-immich-dark-bg { .dark .dark\:bg-immich-dark-bg {
background-color: black; background-color: black;
} }