From 22ca450651c9ac82e594e487f1a8b6960a927535 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 28 May 2025 02:17:54 +0200
Subject: [PATCH] feat: make Loading component a spinning load circle

---
 components/Loading.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/Loading.vue b/components/Loading.vue
index 14a379d..c9b38ac 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    Loading...
+  <div id="loading-container">
+    <Icon name="lucide:loader-circle" id="loading-circle" />
   </div>
 </template>
 
@@ -8,6 +8,31 @@
 
 </script>
 
-<style>
+<style scoped>
+
+#loading-container {
+	position: fixed;
+	left: 50dvw;
+	top: 50dvh;
+	transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+#loading-circle {
+	animation-name: spin;
+	animation-duration: 1s;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	font-size: 2rem;
+}
 
 </style>
\ No newline at end of file