FEAT improve loader angular

apps/maarch_entreprise/css/font-awesome-maarch/css/font-maarch.css

@@ -344,5 +344,40 @@
 .fm-file-model:before {
   content: "\f03b"	; 
 } 
-
+.lds-ring {
+  display: inline-block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin-top: -60px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 51px;
+  height: 51px;
+  margin: 6px;
+  border: 6px solid #135f7f;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #135f7f 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);
+  }
+}
 

apps/maarch_entreprise/index.php

@@ -351,7 +351,7 @@ if ($_REQUEST['page'] && empty($_REQUEST['triggerAngular'])) {
     $user = \User\models\UserModel::getByUserId(['userId' => $cookie['userId'], 'select' => ['password_modification_date', 'change_password', 'status']]);
 
     //HTML CONTENT OF ANGULAR
-    echo '<div id="loadingAngularContent" style="color:#666"></div>';
+    echo '<div id="loadingAngularContent" style="color: #666;height: 100%;padding: 0;margin: 0;display: flex;align-items: center;justify-content: center;"></div>';
     echo '<my-app></my-app>';
 
     if ($user['status'] == 'ABS') {

apps/maarch_entreprise/js/angularFunctions.js

@@ -11,10 +11,10 @@ function triggerAngular(locationToGo) {
 
             if (!alreadyLoaded) {
                 var head = document.getElementsByTagName('head')[0];
-                if ($j('#inner_content').length > 0) {
-                    $j('#inner_content').html('<i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>');
+                if ($j('#maarch_content').length > 0) {
+                    $j('#maarch_content').html('<div style="color: #666;height: 100%;padding: 0;margin: 0;display: flex;align-items: center;justify-content: center;"><div style="opacity:0.5;display: flex;justify-content: center;padding: 5px;height: 20px;margin: 10px;line-height: 20px;font-weight: bold;font-size: 2em;text-align: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div><div style=\'font-family: Roboto,"Helvetica Neue",sans-serif;\'>Chargement en cours ...</div></div></div>');
                 } else {
-                    $j('#loadingAngularContent').html('<i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>');
+                    $j('#loadingAngularContent').html('<div style="opacity:0.5;display: flex;justify-content: center;padding: 5px;height: 20px;margin: 10px;line-height: 20px;font-weight: bold;font-size: 2em;text-align: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div><div style=\'font-family: Roboto,"Helvetica Neue",sans-serif;\'>Chargement en cours ...</div></div>');
                 }
                 answer['scriptsToinject'].forEach(function(element, i) {
                     var script = document.createElement('script');