🎨 Done BaseLoader

Author: csiszaralex

src/components/UI/BaseLoader.vue

@@ -1,12 +1,46 @@
 <template>
-  <div class="spinner-border text-center align-self-center" role="status"></div>
+  <div class="spinner">
+    <div class="bounce"></div>
+    <div class="bounce"></div>
+    <div class="bounce"></div>
+    <div class="bounce"></div>
+    <div class="bounce"></div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-$meret: 10rem;
-.spinner-border {
+$db: 5;
+$meret: 3rem;
+.spinner {
+  margin: 100px auto 0;
+  width: ($meret + 0.4rem) * $db;
+  text-align: center;
+}
+
+.spinner > div {
   width: $meret;
   height: $meret;
-  // border: 5px;
+  margin: 0.2rem;
+  background-color: $dark;
+  border-radius: 100%;
+  display: inline-block;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+@for $i from 1 to $db + 1 {
+  .spinner .bounce:nth-child(#{$i}) {
+    animation-delay: 0.16s * $i;
+  }
+}
+
+@keyframes sk-bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
 }
 </style>

src/components/admin/AdminUser.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h3 my-3">Felhasználói fiókok</div>
-  <base-dialog :show="!!selectedId" title="Felhasználó szerkesztése" upper footless>
+  <base-dialog :show="!!selectedId" title="Felhasználó szerkesztése" upper footless @close="close">
     <profile :id="selectedId" imported @close="close"></profile>
   </base-dialog>
   <base-loader v-if="loading">Loading...</base-loader>

src/views/Landing.vue

@@ -48,7 +48,7 @@ export default {
             });
           }
           results.value = datas;
-          // isLoading.value = false;
+          isLoading.value = false;
         })
         .catch(err => {
           error.value = err;