datalist: set loading class and add (optional) loading gif (CSS) - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit aa6690aad0a7b64010561df965d589b8f1a59a75
(DIR) parent e0c81bf5b28e8e3ae06401063522752d7c4de854
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Mon, 25 Mar 2024 20:47:31 +0100
datalist: set loading class and add (optional) loading gif (CSS)
Diffstat:
M datalist/datalist.js | 7 +++++++
A datalist/loading.css | 8 ++++++++
2 files changed, 15 insertions(+), 0 deletions(-)
---
(DIR) diff --git a/datalist/datalist.js b/datalist/datalist.js
@@ -72,8 +72,15 @@ function datalist_init(input) {
}
timer = setTimeout(function() {
+ // set class for loading indicator styling.
+ input.classList.add("loading");
+
var x = new(XMLHttpRequest);
x.onreadystatechange = function() {
+ // remove loading indicator when "DONE".
+ if (x.readyState == 4)
+ input.classList.remove("loading");
+
if (x.readyState != 4 || [ 0, 200 ].indexOf(x.status) == -1)
return;
(DIR) diff --git a/datalist/loading.css b/datalist/loading.css
@@ -0,0 +1,7 @@
+/* loader gif animation */
+input.datalist.loading {
+ cursor: wait;
+ background-image: url("data:image/gif;base64,R0lGODlhEAAQAIQAAP////f39+/v7+bm5t7e3tbW1szMzMXFxb29vbW1ta2traWlpZmZmZmZmYyMjISEhHNzc////////////////////////////////////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCAAfACwAAAAAEAAQAAAFZuAnjp+ykOhXLMXHPF8wCKmruPBABGQxfAiG4RUg/AK0T0JhGCwSS53MKBocFAkCSaCbkQyGlLdKKP9Q3MFMZ06l1SOZOCmaEugfrjHZlc30U2cCPDppAncieEU/cFJuXnAyeI81IQAh+QQFCAAfACwAAAAADQAJAAAFM+Anjl+hkGQiHoy4tGOisl8CnaN5GEzhQKJCYSBAJAqHA2QxGggHqCg0+hlYp9SrlfoJAQAh+QQFCAAfACwBAAAADgAHAAAFNuAnjocxnp9QCN+BiIt5FkT7JkwtBh9BuwiG4lNADAiDAMFnQCwIDAhEuWSRHhDHKzVAfRjbEAAh+QQFCAAfACwEAAAADAAJAAAFMuAnDoRojsM3FCJimKTKGsr5EcP6JYhNCitFAbFg2ESEBEPxOn4QB6cJ8agunInqYxECACH5BAUIAB8ALAcAAAAJAA0AAAUy4DB8ZPmJZGGig1qKQkGYZysYSWISiKLTCQQtlUu4SAeGUmFKGIYfyOPXfEAYUMbiEwIAIfkEBQgAHwAsCQABAAcADgAABTngFwxfWRJEYAoEGQjfkBJFUbIFAZ+EWRaIIKJkEBpKiYTPsGAobAsIAcFYfKLKj+3DgBxNhkf2EwIAIfkEBQgAHwAsBwAEAAkADAAABTHgJ47DMIoDQZjneo5C6pJFTZzG/RJJcogIn4KAUCQ+jAeCcRwlP4nF6VlgnBTS1ycEACH5BAUIAB8ALAQABwAMAAkAAAUw4CeO4mAOJHmi6TcQ7fgWBLs8x1EodVGIEIZh8UkgSAnI50A0KH6iBZEpShhau1gIACH5BAUIAB8ALAEACQAOAAcAAAU14Pcdi2h+gyAaDAQZpzAQw/dADrEkhTEUKFoChmAYDohf7fRhKEaIDwF4KiyASFFhyRzBmCEAIfkEBQgAHwAsAAAHAA0ACQAABTKg8ozLZ57mMj4M6p7IiyYMU8jfwigFkgwDAWHgKigQg9uA4EokPkkTQTAzRaHElxAVAgAh+QQFCAAfACwAAAQACQAMAAAFMuDHLMZnnssDMWfrPK2hzOWpLPjRtsX+GQnFoIVQIAiEoak2KCSVJudnAP0UhlTfdBACACH5BAEIAB8ALAAAAAAQABAAAAU/4CeOZEkiEGKuH+SwoyEuKfwtjEI8jE0kjMXBNkKobEZjgWhIyogiwQD6IRQKAuKV8BlMYd8BIQslfKFnKjEEADs=");
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+\ No newline at end of file