BuLi-Tipp asyncComputed und Ladeanimation hinzugefügt, Tippen Modal öffnen verbessert, Footer umbenannt

src/components/Navbar.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-import RouterLink from "vue-router";
+<script lang="js">
 export default {
   name: "Navbar",
   props: {
@@ -11,10 +10,6 @@ export default {
       type: String,
       required: false,
     },
-    mainlink: {
-      type: String,
-      required: false,
-    },
   },
   data(){
     return {
@@ -24,15 +19,22 @@ export default {
         { link: "/footer", title: "Kontakt" },
         { link: "/bulitipp", title: "BuLi-Tipp" },
       ],
-      buttontextdata: "Über Ritzenbergen",
-      mainlinkdata: "/willkommen"
+      buttontextdata: "Über Ritzenbergen"
     }
   },
   created() {
       if(this.links) this.datalinks = this.links;
       if(this.buttontext) this.buttontextdata = this.buttontext;
-      if(this.mainlink) this.mainlinkdata = this.mainlink;
   },
+  methods: {
+    clickmain(){
+      if(this.buttontext){
+        this.$emit("clickbtn");
+      }else{
+        this.$router.push("/willkommen");
+      }
+    }
+  }
 };
 </script>
 <template>
@@ -86,8 +88,8 @@ export default {
             </li>
           </ul>
           <div class="navbar-buttons mbr-section-btn">
-            <RouterLink class="btn btn-primary display-4" :to="mainlinkdata"
-              >{{ buttontextdata }}</RouterLink
+            <span class="btn btn-primary display-4" @click="clickmain"
+              >{{ buttontextdata }}</span
             >
           </div>
         </div>

src/components/bulitipp/Loading.vue

@@ -0,0 +1,106 @@
+<script>
+    export default {
+
+    }
+</script>
+<template>
+    <div class="loading-container">
+        <div class="loading-main">
+            <h1>Lade...</h1>
+            <div class="dots-bars-6"></div>
+        </div>
+    </div>
+</template>
+<style scoped>
+    h1{
+        margin-bottom: 50px;
+    }
+    .loading-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        margin: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+    .loading-main{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 50%;
+        width: 50%;
+        background-color: white;
+        border-radius: 20px;
+        flex-direction: column;
+    }
+
+
+    
+.dots-bars-6 {
+    width: 40px;
+    height: 20px;
+    --c:radial-gradient(farthest-side,currentColor 93%,#0000);
+    background:
+      var(--c) 0    0,
+      var(--c) 50%  0;
+    background-size:8px 8px;
+    background-repeat: no-repeat;
+    position: relative;
+    clip-path: inset(-200% -100% 0 0);
+    animation: db6-0 1.5s linear infinite;
+  }
+  .dots-bars-6:before {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 12px;
+    background:currentColor;
+    left:-16px;
+    top:0;
+    animation: 
+      db6-1 1.5s linear infinite,
+      db6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
+  }
+  .dots-bars-6:after {
+    content: "";
+    position: absolute;
+    inset:0 0 auto auto;
+    width:8px;
+    height: 8px;
+    border-radius: 50%;
+    background:currentColor; 
+    animation: db6-3 1.5s  linear infinite;
+  }
+  
+  @keyframes db6-0 {
+    0%,30%  {background-position: 0  0   ,50% 0   }
+    33%     {background-position: 0  100%,50% 0   }
+    41%,63% {background-position: 0  0   ,50% 0   }
+    66%     {background-position: 0  0   ,50% 100%}
+    74%,100%{background-position: 0  0   ,50% 0   }
+  }
+  
+  @keyframes db6-1 {
+    90%  {transform:translateY(0)}
+    95%  {transform:translateY(15px)}
+    100% {transform:translateY(15px);left:calc(100% - 8px)}
+  }
+  
+  @keyframes db6-2 {
+    100% {top:-0.1px}
+  }
+  
+  @keyframes db6-3 {
+    0%,80%,100% {transform:translate(0)}
+    90%         {transform:translate(26px)}
+  }
+
+
+</style>