feat: preloader

helsingborg-stad · Jan 9, 2024 · b868e0e · b868e0e
1 parent 0a47cc8
commit b868e0e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/assets/css/animations.css b/assets/css/animations.css
@@ -44,3 +44,24 @@
     opacity: 1;
   }
 }
+
+
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 50px;
+  margin-top: -25px;
+  margin-left: -25px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 8px solid;
+  border-color: #00000047 #0000;
+  animation: l1 1s infinite;
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  background: #eee;
+  outline: 5000px solid #eee;
+  z-index: 9999;
+  outline-offset: -1px;
+}
+@keyframes l1 {to{transform: rotate(.5turn)}}
diff --git a/assets/js/FormNavigationManager.js b/assets/js/FormNavigationManager.js
@@ -13,6 +13,12 @@ class FormNavigationManager {
     FormNavigationStepChange.setupStepChange(formsApi);
     FormNavigationSubmitted.setupSubmitted(formsApi);
     FormNavigationButtons.setupCancelAndCloseButtons();
+
+    formsApi.onReady(function() {
+      setTimeout(function() {
+        document.querySelector(".loader").remove(); 
+      }, 1000);
+    }); 
   }
 }
 

diff --git a/dist/app.js b/dist/app.js
diff --git a/index.html b/index.html
@@ -12,8 +12,8 @@
     <link rel="stylesheet" type="text/css" href="assets/css/animations.css" media="all">  
   </head>
 <body>
+  <div class="loader"></div>
   <div id="app">
-
     <div id="header" class="hidden-app">
       <div id="app-banner" class="c-notice u-display--none" aria-hidden="true">
         <span class="c-notice__text">