Loading spinner between verify page steps

Author: numtel

app.js

@@ -30,8 +30,12 @@ document.querySelectorAll('[data-step]').forEach(element => {
     if(activeMenuLi) activeMenuLi.classList.toggle('active', false);
     document.querySelector('#wizard>menu').classList.toggle('hidden', !thisMenuLi);
     thisMenuLi && thisMenuLi.classList.toggle('active', true);
-    document.querySelectorAll('#wizard>main').forEach(el =>
-      el.classList.toggle('hidden', el.id === step ? false : true));
+    function showMain(step) {
+      document.querySelectorAll('#wizard>main').forEach(el =>
+        el.classList.toggle('hidden', el.id === step ? false : true));
+    }
+    showMain('loading');
+    setTimeout(() => showMain(step), 900);
   }, true);
 });
 

style.css

@@ -8,7 +8,7 @@
 body {background:#ddd; color:#222; font-family:Inter, sans-serif; min-height:100vh; margin:0; padding:0; overflow-x:hidden; max-width:100vw;display:flex;flex-direction:column;}
 article {padding:30px 10px; }
 #wizard {max-width:720px; padding:0; margin:auto 10px; align-self:center; background:#eee; color:#222; border-radius: 10px 10px 0 0; box-shadow: 0 0 30px #000; }
-#wizard h1 {background:linear-gradient(180deg, #dbdbdb 0%, #d6d6d6 100%); border-width:1px 0; border-style:solid; border-color:#e8e8e8 #000 #a7a7a7 #000; margin:0; padding: 14px 0; font-size: 100%; text-align:center; border-radius: 10px 10px 0 0;}
+#wizard h1 {background:linear-gradient(180deg, #dbdbdb 0%, #d6d6d6 100%); border-width:1px 0; border-style:solid; border-color:#e8e8e8 #000 #a7a7a7 #000; margin:0; padding: 14px; font-size: 100%; text-align:center; border-radius: 10px 10px 0 0;}
 #wizard menu {margin:0; padding:0 10px; list-style:none; display:flex; background:#c8c8c8; border-bottom:1px solid #9b9b9b;}
 @media (max-width:450px) { #wizard menu {flex-direction:column;} }
 #wizard menu li { border-bottom: 4px solid #0000; flex:1; text-align:center; padding: 10px; white-space:nowrap; }
@@ -69,3 +69,41 @@ article.page { max-width:720px; margin:0 auto; }
 #grey-banner article { background-image:url(images/collage.png); background-size:contain; background-position:top right; background-repeat: no-repeat no-repeat;   min-height:300px; color:#111; margin-bottom:20px; }
 
 
+.loader { text-align:center;}
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid #666;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #666 transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+

verify.html

@@ -86,6 +86,11 @@ <h1>Coinpassport Verification</h1>
             <li rel="step2">2. Scan Document</li>
             <li rel="step3">3. Publish Result</li>
           </menu>
+          <main id="loading" class="hidden">
+            <div class="loader">
+              <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+            </div>
+          </main>
           <main id="step1">
             <p>Document verification costs 3 USDC.</p>
             <p>Please approve and pay this amount.</p>