kenkeiras/new-codigoparallevar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add simple color loop when loading query.

Browse Source
This commit is contained in:
Sergio Martínez Portela 2023-05-01 22:37:00 +02:00
parent bdda2f3676
commit 210a508a90
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/search-box.js
View File

@ -67,6 +67,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
return; return;
} }
lastVal = val; lastVal = val;
resultsBox.classList.add('loading');
const uri = SEARCH_ENDPOINT + '?q=' + encodeURIComponent(val); const uri = SEARCH_ENDPOINT + '?q=' + encodeURIComponent(val);
let query = fetch(uri); let query = fetch(uri);
@ -79,6 +80,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
return; return;
} }
resultsBox.classList.remove('loading');
resultsList.innerHTML = ''; resultsList.innerHTML = '';
for (const list of [ for (const list of [
body.results.notes.filter(n => n.is_todo !== "1"), body.results.notes.filter(n => n.is_todo !== "1"),

23
static/style.css
View File

@ -84,6 +84,29 @@ body nav input {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
@keyframes loading-query {
from {
border-bottom-color: hsl(0 80% 40%);
}
30% {
border-bottom-color: hsl(80 80% 40%);
}
60% {
border-bottom-color: hsl(180 80% 40%);
}
to {
border-bottom-color: hsl(360 80% 40%);
}
}
.results-box-container .results-box.loading input {
animation-name: loading-query;
border-bottom-width: 2px;
animation-duration: 2s;
margin-bottom: -1px;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* Search box results */ /* Search box results */
.results-box ul { .results-box ul {
list-style: none; list-style: none;