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

added cool loading animation for dynamic scrolling
All checks were successful
Run Integration Tests / test (push) Successful in 28s
Details

Browse source
This commit is contained in:
partisan 2025-04-23 13:18:12 +02:00
parent 30528d629b
commit 2929b7781a
53 changed files with 141 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

60
static/css/style-loadingindicator.css Normal file
View file

@ -0,0 +1,60 @@
.message-bottom-right {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--search-bg);
color: var(--text-color);
padding: 10px;
border-radius: 5px;
z-index: 1000;
text-align: center;
flex-direction: column;
border: 1px solid var(--border);
box-shadow: 0 0 10px var(--box-shadow);
}
.message-bottom-right.visible {
opacity: 1;
pointer-events: auto;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
70% {
transform: translateY(-5px);
}
85% {
transform: translateY(0);
}
95% {
transform: translateY(-2px);
}
}
.dot {
display: inline-block;
animation: bounce 1.5s infinite;
}
.dot:nth-child(2) {
animation-delay: 0.1s;
}
.dot:nth-child(3) {
animation-delay: 0.2s;
}
.dot:nth-child(4) {
animation-delay: 0.3s;
}

18
static/css/style.css
View file

@ -1310,24 +1310,6 @@ p {
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
}
.message-bottom-left {
display: none;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--search-bg);
color: var(--text-color);
padding: 10px;
border-radius: 5px;
z-index: 1000;
text-align: center;
flex-direction: column;
border: 1px solid var(--border);
box-shadow: 0 0 10px var(--box-shadow);
}
body, h1, p, a, input, button {
color: var(--text-color); /* Applies the text color based on theme */
background-color: var(--background-color); /* Applies the background color based on theme */