add spinner on ajax request

public_html/admin/functions.js

@@ -34,7 +34,10 @@ async function show(body){
  * @param {object} oLink  link object; in a tag use this to reference itself
  */
 async function showInOverlay(oLink){
-    show('<h2>Please wait ...</h2><p>Requesting data...</p>');
+    show(
+      '<h2>Please wait ...</h2>'
+      +'<p>Requesting data...<div class="spin"></div></p>'
+    );
     let response = await fetch(oLink.href);
     let body = await response.text(); // read response body as text
 

public_html/admin/main.css

@@ -2,7 +2,7 @@ a{color:royalblue;}
 body{background: #f8f8f8; color: #234; font-family: arial; margin: 0;}
 h1{background:rgba(0,0,0,0.05); margin: 0 0 1em;; padding: 0.5em;}
 h1 a{color:#234; text-decoration: none;}
-h2{background: #d0e0e8;  color:#458; margin: 1em 0 0.5em; border-top: 2px solid #fff; border-left: 5px solid #fff; border-top-left-radius: 0.5em; padding: 0.5em; }
+h2{background: #d0e0e8;  color:#458; margin: 1em 0 0.5em; border-top: 2px solid #fff; border-left: 5px solid #fff; border-top-left-radius: 0.5em; padding: 0.5em; margin: 0 0 1em;}
 
 pre{background: rgba(0,0,0,0.02);padding: 0.3em 1em; border: 1px solid rgba(0,0,0,0.1); margin: 2em 0 3em;; border-bottom: 2px solid rgba(0,0,0,0.2);}
 
@@ -10,6 +10,7 @@ tr:hover{background: #f4f0f8 !important;}
 footer{background:rgba(0,0,0,0.03); margin-top: 4em; text-align: right;padding: 1em;}
 
 .content{margin: 0 1em;}
+.legend{background: #fff; padding: 1em;}
 .error{background: #fcc;}
 .warning{color:#651; background:#fec;}
 
@@ -24,6 +25,7 @@ footer{background:rgba(0,0,0,0.03); margin-top: 4em; text-align: right;padding:
 .status-ok{color:#080; background:#cec; }
 .status-redirect{color:#651; background:#fec;}
 .status-error{color:#800; background:#ecc;}
+.statuscode{background: rgba(255,255,255,0.8); font-size: 150%;}
 
 .location{background:#cde; border: 1px solid rgba(0,0,0,0.2); font-size: 125%; color:#236;}
 .location::before{content:' > '; color:#800; background-color: #fff;}
@@ -32,3 +34,23 @@ footer{background:rgba(0,0,0,0.03); margin-top: 4em; text-align: right;padding:
 .overlay{position: fixed; margin: 0; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.3);overflow: scroll; display: none;}
 .overlay>div{margin: 3% 10%; background: #f8f8f8; padding: 1em;box-shadow: 0 0 3em #000; }
 
+.spin {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border: 3px solid #ccc;
+    border-radius: 50%;
+    border-top-color: #1c87c9;
+    animation: spin 1s ease-in-out infinite;
+    -webkit-animation: spin 1s ease-in-out infinite;
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(720deg);
+    }
+  }
+  @-webkit-keyframes spin {
+    to {
+      transform: rotate(0deg);
+    }
+  }
\ No newline at end of file