From eb3b9c966871253be3cf12cec08bef5f3187f6b9 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Fri, 21 Nov 2025 11:16:33 +0800
Subject: [PATCH] [+] Loading

---
 src/components/status/Loading.svelte | 46 ++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/status/Loading.svelte

diff --git a/src/components/status/Loading.svelte b/src/components/status/Loading.svelte
new file mode 100644
index 0000000..4cb71ed
--- /dev/null
+++ b/src/components/status/Loading.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+
+  let { open } = $props();
+</script>
+
+{#if open}
+  <div class="overlay loading" transition:fade>
+    <span class="icon i-svg-spinners:pulse-2"></span>
+    <span class="text"><span>LOADING</span></span>
+  </div>
+{/if}
+
+<style lang="sass">
+.overlay
+  position: fixed
+  inset: 0
+
+  background-color: rgba(0, 0, 0, 0.5)
+
+  display: flex
+  justify-content: center
+  align-items: center
+
+  z-index: 1000
+  backdrop-filter: blur(5px)
+
+.loading.overlay
+  font-size: 28rem
+
+  .icon
+    opacity: 0.5
+
+  .text
+    position: absolute
+    inset: 0
+    display: flex
+    justify-content: center
+    align-items: center
+    background: transparent
+
+    letter-spacing: 20px
+    margin-left: 20px
+
+    font-size: 1.5rem
+</style>