initialize Project

frontend/components/Spinner.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="loader-overlay" v-if="loading">
+    <div class="spinner"></div>
+  </div>
+</template>
+
+<script setup>
+// Accept a `loading` prop to control visibility
+defineProps({
+  loading: {
+    type: Boolean,
+    default: true
+  }
+});
+</script>
+
+<style scoped>
+.loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.spinner {
+  border: 5px solid #ccc;
+  border-top-color: #1e88e5; /* blue color */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+/* Spin animation */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>