Finish spinner, add separate JS for re-usage and use spinning TYPO3 logo

Build/Assets/JavaScript/Helper/Spinner.js

+const spinner = {};
+const loadingDiv = $('#loadingDiv');
+
+spinner.show = function () {
+  loadingDiv.show();
+}
+spinner.hide = function () {
+  loadingDiv.hide();
+}
+
+module.exports = spinner;

Build/Assets/JavaScript/Module/FlyOutAjaxLogin.js

 const gravatar = require('gravatar');
+const spinner = require('../Helper/Spinner');
 const NotifyMessage = require('./NotifyMessage');
 const FlyOutAjaxLogin = function (props) {
     FlyOutAjaxLogin.settings = props;
@@ -80,19 +81,17 @@ FlyOutAjaxLogin.prototype.initLoginLogoutTemplate = function () {
       const wrapper = document.createElement('div');
       wrapper.classList = 'd-flex flex-row m-auto';
       wrapper.innerHTML = response;
-      aim.innerHTML = '<div id="loadingDiv"><i class="fas fa-circle-notch fa-spin fa-4x fa-fw"></i></div>';
+      aim.innerHTML = '';
       aim.appendChild(wrapper);
 
       const loginForm = $('#login-form');
       const logoutForm = $('#logout-form');
       const loginObject = new FlyOutAjaxLogin();
-      const loadingDiv = $('#loadingDiv');
-      loadingDiv.hide();
       $(document).ajaxStart(
         function () {
-          loadingDiv.show();
+          spinner.show();
         }).ajaxStop(function () {
-          loadingDiv.hide();
+          spinner.hide();
         });
 
       const email = $('#gravatar-image').data('email');

Build/Assets/Scss/components/_spinner.scss

+
+#loadingDiv {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    opacity: 50%;
+    z-index: 5000;
+    background: rgba(255, 255, 255, 1);
+
+    .loader {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -2em;
+        margin-top: -2em;
+        background: rgba(255, 255, 255, 1);
+
+        img {
+            width: 4em;
+            height: 4em;
+            animation: rotation 2s infinite linear;
+        }
+    }
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(359deg);
+    }
+}

Build/Assets/Scss/layout/_navigation.scss

@@ -845,14 +845,3 @@
         }
     }
 }
-
-#loadingDiv {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 50%;
-    z-index: 2000;
-    background-color: white;
-    padding-top: 25%;
-    padding-left: 47%;
-}

Build/Assets/Scss/main.scss

@@ -94,3 +94,4 @@
 @import "components/featuresHeader";
 @import "components/jumbotron";
 @import "components/membership-popup";
+@import "components/spinner";

Resources/Private/Templates/Default.html

@@ -7,6 +7,11 @@
 			<!-- Fallback to consume the defined space on loading and no component support -->
 			<div style="display: block; height: 44px; background-color: #fff;"></div>
 		</typo3-universe>
+		<div id="loadingDiv" style="display: none;">
+			<div class="loader">
+				<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
+			</div>
+		</div>
 		<div class="page-container mx-auto">
 			<f:render section="Header" partial="Page/Header" arguments="{_all}" />
 			<main>

Resources/Private/Templates/Page/404.html

@@ -7,7 +7,12 @@
 				<!-- Fallback to consume the defined space on loading and no component support -->
 				<div style="display: block; height: 44px; background-color: #fff;"></div>
 			</typo3-universe>
-        <div class="page-container page-template-404 mx-auto">
+			<div id="loadingDiv" style="display: none;">
+				<div class="loader">
+					<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
+				</div>
+			</div>
+			<div class="page-container page-template-404 mx-auto">
             <f:render section="Header" partial="Page/Header" arguments="{_all}" />
             <main>
                 <div class="container page-content">

Resources/Private/Templates/Page/Design.html

@@ -7,7 +7,12 @@
 				<!-- Fallback to consume the defined space on loading and no component support -->
 				<div style="display: block; height: 44px; background-color: #fff;"></div>
 			</typo3-universe>
-        <f:render section="Header" partial="Page/Header" arguments="{_all}"/>
+			<div id="loadingDiv" style="display: none;">
+				<div class="loader">
+					<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
+				</div>
+			</div>
+			<f:render section="Header" partial="Page/Header" arguments="{_all}"/>
         <main>
             <f:render section="Slider" partial="Page/Slider" arguments="{_all}"/>
         </main>

Resources/Private/Templates/Page/Subnavigation.html

@@ -7,7 +7,12 @@
 				<!-- Fallback to consume the defined space on loading and no component support -->
 				<div style="display: block; height: 44px; background-color: #fff;"></div>
 			</typo3-universe>
-        <div class="page-container mx-auto">
+			<div id="loadingDiv" style="display: none;">
+				<div class="loader">
+					<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
+				</div>
+			</div>
+			<div class="page-container mx-auto">
             <f:render section="Header" partial="Page/Header" arguments="{_all}" />
             <main>
                 <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}"/>

Resources/Private/Templates/Page/Team.html

@@ -7,7 +7,12 @@
 				<!-- Fallback to consume the defined space on loading and no component support -->
 				<div style="display: block; height: 44px; background-color: #fff;"></div>
 			</typo3-universe>
-        <div class="page-container mx-auto">
+			<div id="loadingDiv" style="display: none;">
+				<div class="loader">
+					<img src="/typo3conf/ext/t3olayout/Resources/Public/Images/typo3_logo.svg">
+				</div>
+			</div>
+			<div class="page-container mx-auto">
             <f:render section="Header" partial="Page/Header" arguments="{_all}" />
             <main>
                 <div class="container">