add a loader

Signed-off-by: MiniDigger <admin@minidigger.me>

src/main/frontend/src/js/main.js

@@ -40,6 +40,9 @@ $(function () {
     $('.link-go-back').click(function () {
         window.history.back();
     });
+
+    // we loaded now I guess
+    $('.loader').hide();
 });
 
 // Fix page anchors which were broken by the fixed top navigation

src/main/frontend/src/scss/_loader.scss

@@ -0,0 +1,54 @@
+.loader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden
+}
+
+.loader.active {
+  display: -ms-flexbox;
+  display: flex
+}
+
+.loader-background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #acacac;
+  opacity: .7
+}
+
+.loader-icon {
+  position: relative
+}
+
+.loader-icon svg {
+  width: 128px;
+  height: 128px;
+  overflow: hidden;
+  vertical-align: middle;
+  stroke: #00718f;
+  animation: turn 1s linear infinite
+}
+
+@-webkit-keyframes turn {
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes turn {
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn)
+  }
+}

src/main/frontend/src/scss/main.scss

@@ -17,6 +17,7 @@
 @import "buttons";
 
 @import "channel";
+@import "loader";
 
 html {
   position: relative;

src/main/resources/templates/layout/base.ftlh

@@ -59,6 +59,20 @@ showFooter: Boolean = true, noContainer: Boolean = false, additionalMeta: Html =
         <@header.header authEnabled=authEnabled />
     </#if>
 
+    <div tabindex="0" aria-label="Loading" class="loader active" aria-busy="true" id="page-loader">
+        <div class="loader-background"></div>
+        <div class="loader-icon">
+            <svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+                <g fill="none" fill-rule="evenodd">
+                    <g transform="translate(1 1)" stroke-width="2">
+                        <circle stroke-opacity=".25" cx="18" cy="18" r="18"></circle>
+                        <path d="M36 18c0-9.94-8.06-18-18-18" transform="rotate(111.343 18 18)"></path>
+                    </g>
+                </g>
+            </svg>
+        </div>
+    </div>
+
     <div class="site-content">
         <#if noContainer>
             <#nested>