Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

improved image loading animation
All checks were successful
Run Integration Tests / test (push) Successful in 28s
Details

Browse source
This commit is contained in:
partisan 2025-04-23 12:26:05 +02:00
parent 5fdbe231d1
commit 30528d629b
4 changed files with 111 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

63
static/css/style-imageloading.css Normal file
View file

@ -0,0 +1,63 @@
/* Image Loading Effect */
.loading-image {
position: relative;
overflow: hidden;
background-color: var(--snip-background);
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0) 75%
);
background-size: 200% 100%;
animation: image-wave 2s infinite linear;
}
/* Title Loading Effect */
.title-loading {
position: relative;
overflow: hidden;
color: transparent !important;
background-color: var(--snip-background);
min-height: 1.2em;
width: 80%;
margin: 0 auto;
top: 2px;
border-radius: 6px;
}
.title-loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 25%,
rgba(255, 255, 255, 0.25) 50%,
transparent 75%
);
background-size: 200% 100%;
animation: title-wave 2.5s infinite linear;
}
/* Animations */
@keyframes image-wave {
0% {
background-position: -100% 0; /* Start off-screen left */
}
100% {
background-position: 100% 0; /* End off-screen right */
}
}
@keyframes title-wave {
0% {
background-position: -100% 0; /* Start off-screen left */
}
100% {
background-position: 100% 0; /* End off-screen right */
}
}