searchengines-web/MeiliSearch
searchengines-web/MeiliSearch
1
0
Fork 0
mirror of https://github.com/meilisearch/MeiliSearch synced 2025-01-23 11:47:28 +01:00
Code Issues Releases Wiki Activity

Add a fade in out animation when the server process

Browse Source
This commit is contained in:
Kerollmops 2020-07-12 11:34:48 +02:00
parent 92c2b1dd2d
commit 54afec58a3
No known key found for this signature in database
GPG Key ID: 92ADA4E935E71FA4
2 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/script.js
View File

@ -16,6 +16,7 @@ $('#search').on('input', function () {
let numberOfDocuments = httpResults.data.length; let numberOfDocuments = httpResults.data.length;
count.innerHTML = `${numberOfDocuments}`; count.innerHTML = `${numberOfDocuments}`;
time.innerHTML = `${timeSpent}ms`; time.innerHTML = `${timeSpent}ms`;
time.classList.remove('fade-in-out');
for (element of httpResults.data) { for (element of httpResults.data) {
const elem = document.createElement('li'); const elem = document.createElement('li');
@ -49,6 +50,7 @@ $('#search').on('input', function () {
beforeSend: function () { beforeSend: function () {
if (request !== null) { if (request !== null) {
request.abort(); request.abort();
time.classList.add('fade-in-out');
} }
}, },
}); });

10
public/style.css
View File

@ -68,3 +68,13 @@ em {
padding-left: 10px; padding-left: 10px;
color: rgba(0,0,0,.9); color: rgba(0,0,0,.9);
} }
@keyframes fadeInOut {
0% { opacity: 1; }
30% { opacity: 0.3; }
100% { opacity: 1; }
}
.fade-in-out {
animation: fadeInOut ease 1s infinite;
}