diff --git a/static/search-box.js b/static/search-box.js index 3bac4a5..5e412a5 100644 --- a/static/search-box.js +++ b/static/search-box.js @@ -67,6 +67,7 @@ function _codigoparallevar_enable_search_box(selector, options) { return; } lastVal = val; + resultsBox.classList.add('loading'); const uri = SEARCH_ENDPOINT + '?q=' + encodeURIComponent(val); let query = fetch(uri); @@ -79,6 +80,7 @@ function _codigoparallevar_enable_search_box(selector, options) { return; } + resultsBox.classList.remove('loading'); resultsList.innerHTML = ''; for (const list of [ body.results.notes.filter(n => n.is_todo !== "1"), diff --git a/static/style.css b/static/style.css index 28750b1..cefd238 100644 --- a/static/style.css +++ b/static/style.css @@ -84,6 +84,29 @@ body nav input { 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 */ .results-box ul { list-style: none;