added loader #2235

src/App.vue

@@ -127,8 +127,8 @@ export default {
 
   <div id="main-content">
     <MapConcernements>
-      <!-- <div class="loading" v-if="mapitems.length === 0">Chargement ...</div> -->
+      <div class="loading" v-if="mapitems.length === 0">Chargement</div>
-      <!-- <template v-else> -->
+      <template v-else>
         <template v-for="(mapitem,index) in mapitems">
           <ConcernementMapItem
             v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
@@ -136,7 +136,7 @@ export default {
             :mapitem="mapitem"
           />
         </template>
-      <!-- </template> -->
+      </template>
     </MapConcernements>
     <div id="content" :class="{'recit-opened':opened_recit}">
       <RouterView />

src/assets/Ellipsis-5s-100px.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="84" cy="50" r="10" fill="#000000" style="animation-play-state: running; animation-delay: 0s;">
+    <animate attributeName="r" repeatCount="indefinite" dur="1.25s" calcMode="spline" keyTimes="0;1" values="10;0" keySplines="0 0.5 0.5 1" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+    <animate attributeName="fill" repeatCount="indefinite" dur="5s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#000000;#000000;#000000;#000000;#000000" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="16" cy="50" r="10" fill="#000000" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="50" cy="50" r="10" fill="#000000" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.25s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.25s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="84" cy="50" r="10" fill="#000000" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.5s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-2.5s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle><circle cx="16" cy="50" r="10" fill="#000000" style="animation-play-state: running; animation-delay: 0s;">
+  <animate attributeName="r" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-3.75s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+  <animate attributeName="cx" repeatCount="indefinite" dur="5s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-3.75s" style="animation-play-state: running; animation-delay: 0s;"></animate>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

src/assets/main.scss

@@ -88,6 +88,24 @@ body{
       top:50%;
       left:50%;
       z-index: 200;
+      transform: translateX(-50%) translateY(-50%);
+      width: 150px;
+      display: block;
+      text-align: center;
+      // font-weight: 600;
+      font-size: 1.134em;
+      &::after{
+        background: url(../assets/Ellipsis-5s-100px.svg);
+        background-clip: content-box;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        display: inline-block;
+        width: 150px; height: 30px;
+
+        border: #01ffe2;
+        content: " ";
+      }
     }
   }