initial commit

2026-02-26 21:29:34 +01:00
commit d9d84634e8
72 changed files with 18491 additions and 0 deletions
--- a/app/components/ui/Loading.vue
+++ b/app/components/ui/Loading.vue
@@ -0,0 +1,68 @@
+<template>
+<h3>
+</h3>
+  <div class="loading">
+    <div class="loading__circle loading__circle--color-blue"></div>
+		<div class="loading__circle loading__circle--color-red"></div>
+    <div class="loading__circle loading__circle--color-yellow"></div>
+		<div class="loading__circle loading__circle--color-green"></div>
+	</div>
+</template>
+
+<style lang=scss scoped>
+.loading {
+  position: absolute;
+  top:40%;
+  left:calc(50% - (2rem*4 + 0.750rem * 3) / 2); 
+  margin:auto;
+  //padding: 0.625rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading__circle {
+  min-width: 2rem;
+  aspect-ratio: 1;
+  background-color: lightgrey;
+  border-radius: 50%;
+  margin: 0 0.375rem;
+    animation-name: bump; 
+    animation-duration: 2s; 
+    animation-iteration-count: infinite; 
+}
+
+.loading__circle--color-blue {
+  background-color: #4285f4;
+  animation-delay:0;
+
+}
+.loading__circle--color-red {
+  background-color: #ea4335;
+  animation-delay:0.5s;
+}
+.loading__circle--color-yellow {
+  background-color: #fbbc05;
+  animation-delay:1s;
+    
+}
+.loading__circle--color-green {
+  background-color: #34a853;
+  animation-delay:1.5s;
+}
+
+@keyframes bump {
+    from {
+    transform: scale(1);
+    }
+    25% {
+    transform: scale(1.4);
+    }
+    50%{
+    transform: scale(1);
+    }
+    100%{
+    transform:scale(1);
+    }
+}
+</style>