diff --git a/ui/html/index.css b/ui/html/index.css
index 72931dd..a091ac3 100644
--- a/ui/html/index.css
+++ b/ui/html/index.css
@@ -101,6 +101,24 @@ input, button {
margin-top: 1rem;
color: #7c889c;
}
+#search #loadani {
+ display: none;
+ margin-top: 1rem;
+ visibility: hidden;
+}
+#search #loadani #spinner {
+ animation: 1s linear infinite spinner;
+ border: 2px solid transparent;
+ border-bottom: 2px solid #61afef;
+ border-radius: 0.5rem;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+}
+#search #loadani span {
+ color: #61afef;
+ margin-left: 0.5rem;
+}
#results table {
margin-left: 25vw;
@@ -164,4 +182,13 @@ input, button {
width: 1.2rem;
}
+@keyframes spinner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
/*# sourceMappingURL=index.css.map */
diff --git a/ui/html/index.css.map b/ui/html/index.css.map
index 70e9bfb..6f9d86a 100644
--- a/ui/html/index.css.map
+++ b/ui/html/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvGK;;AAwGN;EACC,OAxGK;;AAyGN;EACC,OA7GK;;AA8GP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApHK;;AAqHN;EACC,OAzHK;;AA0HP;EACC;EACA;;AACA;EACC,kBA/HK;EAgIL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA5GO;EA6GP;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvHK;;AAwHN;EACC,OAxHK;;AAyHN;EACC,OA7HK;;AA8HP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApIK;;AAqIN;EACC,OAzIK;;AA0IP;EACC;EACA;;AACA;EACC,kBA/IK;EAgJL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"}
\ No newline at end of file
diff --git a/ui/html/index.html b/ui/html/index.html
index 8793bda..0445748 100644
--- a/ui/html/index.html
+++ b/ui/html/index.html
@@ -3,4 +3,4 @@
-
dnswatch
Try "gnu.org", "wikipedia.com", "s.to" or your own website!
+dnswatch
Try "gnu.org", "wikipedia.com", "s.to" or your own website!
diff --git a/ui/html/index.js b/ui/html/index.js
index 0c4e962..3560bd9 100644
--- a/ui/html/index.js
+++ b/ui/html/index.js
@@ -1,4 +1,8 @@
function dnswatch_search() {
+ // activate spinner
+ document.getElementById('loadani').style.visibility = 'visible';
+ document.getElementById('loadani').style.display = 'block';
+
// get domain
var domain = document.getElementById('dnswatch-search').value.toLowerCase();
@@ -89,6 +93,10 @@ function dnswatch_search() {
document.getElementById('results').innerHTML = table;
feather.replace();
}
+
+ // deactivate spinner
+ document.getElementById('loadani').style.visibility = 'hidden';
+ document.getElementById('loadani').style.display = 'none';
}
request.send(`domain=${ window.btoa(domain) }`);
diff --git a/ui/jhtml-compat/index.css b/ui/jhtml-compat/index.css
index e84d57e..b2bb553 100644
--- a/ui/jhtml-compat/index.css
+++ b/ui/jhtml-compat/index.css
@@ -102,6 +102,24 @@ input, button {
margin-top: 1rem;
color: #7c889c;
}
+#search #loadani {
+ display: none;
+ margin-top: 1rem;
+ visibility: hidden;
+}
+#search #loadani #spinner {
+ animation: 1s linear infinite spinner;
+ border: 2px solid transparent;
+ border-bottom: 2px solid #61afef;
+ border-radius: 0.5rem;
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+}
+#search #loadani span {
+ color: #61afef;
+ margin-left: 0.5rem;
+}
#results table {
margin-left: 25vw;
@@ -165,4 +183,13 @@ input, button {
width: 1.2rem;
}
+@keyframes spinner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
/*# sourceMappingURL=index.css.map */
diff --git a/ui/jhtml-compat/index.css.map b/ui/jhtml-compat/index.css.map
index 70e9bfb..6f9d86a 100644
--- a/ui/jhtml-compat/index.css.map
+++ b/ui/jhtml-compat/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvGK;;AAwGN;EACC,OAxGK;;AAyGN;EACC,OA7GK;;AA8GP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApHK;;AAqHN;EACC,OAzHK;;AA0HP;EACC;EACA;;AACA;EACC,kBA/HK;EAgIL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA5GO;EA6GP;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvHK;;AAwHN;EACC,OAxHK;;AAyHN;EACC,OA7HK;;AA8HP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApIK;;AAqIN;EACC,OAzIK;;AA0IP;EACC;EACA;;AACA;EACC,kBA/IK;EAgJL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"}
\ No newline at end of file
diff --git a/ui/jhtml-compat/index.js b/ui/jhtml-compat/index.js
index bfd5620..1735ffe 100644
--- a/ui/jhtml-compat/index.js
+++ b/ui/jhtml-compat/index.js
@@ -1,5 +1,9 @@
*stop()
function dnswatch_search() {
+ // activate spinner
+ document.getElementById('loadani').style.visibility = 'visible';
+ document.getElementById('loadani').style.display = 'block';
+
// get domain
var domain = document.getElementById('dnswatch-search').value.toLowerCase();
@@ -90,6 +94,10 @@ function dnswatch_search() {
document.getElementById('results').innerHTML = table;
feather.replace();
}
+
+ // deactivate spinner
+ document.getElementById('loadani').style.visibility = 'hidden';
+ document.getElementById('loadani').style.display = 'none';
}
request.send(`domain=${ window.btoa(domain) }`);
diff --git a/ui/jhtml-compat/index.php b/ui/jhtml-compat/index.php
index ed25c22..62377c2 100644
--- a/ui/jhtml-compat/index.php
+++ b/ui/jhtml-compat/index.php
@@ -5,4 +5,4 @@
*js("///index.js")
*js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js")
*postjs("///feather.js")
-dnswatch
Try "gnu.org", "wikipedia.com", "s.to" or your own website!
\ No newline at end of file
+dnswatch
Try "gnu.org", "wikipedia.com", "s.to" or your own website!
\ No newline at end of file
diff --git a/ui/raw/index.js b/ui/raw/index.js
index 0c4e962..3560bd9 100644
--- a/ui/raw/index.js
+++ b/ui/raw/index.js
@@ -1,4 +1,8 @@
function dnswatch_search() {
+ // activate spinner
+ document.getElementById('loadani').style.visibility = 'visible';
+ document.getElementById('loadani').style.display = 'block';
+
// get domain
var domain = document.getElementById('dnswatch-search').value.toLowerCase();
@@ -89,6 +93,10 @@ function dnswatch_search() {
document.getElementById('results').innerHTML = table;
feather.replace();
}
+
+ // deactivate spinner
+ document.getElementById('loadani').style.visibility = 'hidden';
+ document.getElementById('loadani').style.display = 'none';
}
request.send(`domain=${ window.btoa(domain) }`);
diff --git a/ui/raw/index.pug b/ui/raw/index.pug
index 75b6303..682afa2 100644
--- a/ui/raw/index.pug
+++ b/ui/raw/index.pug
@@ -12,5 +12,8 @@
button#dnswatch-search-submit: i( data-feather='search' )
button#help: i( data-feather='help-circle' )
small Try "gnu.org", "wikipedia.com", "s.to" or your own website!
+ #loadani
+ #spinner
+ span loading...
#results
diff --git a/ui/raw/index.sass b/ui/raw/index.sass
index a8ab05f..da194e2 100644
--- a/ui/raw/index.sass
+++ b/ui/raw/index.sass
@@ -95,6 +95,22 @@ input, button
margin-top: 1rem
color: darken($c-fg, 30%)
+ #loadani
+ display: none
+ margin-top: 1rem
+ visibility: hidden
+ #spinner
+ animation: 1s linear infinite spinner
+ border: 2px solid transparent
+ border-bottom: 2px solid $c-blue
+ border-radius: .5rem
+ display: inline-block
+ height: 1rem
+ width: 1rem
+ span
+ color: $c-blue
+ margin-left: .5rem
+
#results
table
margin-left: 25vw
@@ -142,3 +158,9 @@ input, button
height: 1.2rem
vertical-align: -.2rem
width: 1.2rem
+
+@keyframes spinner
+ 0%
+ transform: rotate(0deg)
+ 100%
+ transform: rotate(360deg)