From 807e1cd0f63eb987b714be9cd72020b5eb4ba4ee Mon Sep 17 00:00:00 2001
From: 7222e800-c703-472d-a787-71b6b5cba4ef <mem@estrogen.zone>
Date: Sun, 14 Sep 2025 17:23:45 +0000
Subject: refactor: Extract Loader

---
 src/lib/Loader.svelte | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/lib/Loader.svelte

(limited to 'src/lib/Loader.svelte')

diff --git a/src/lib/Loader.svelte b/src/lib/Loader.svelte
new file mode 100644
index 0000000..a264f41
--- /dev/null
+++ b/src/lib/Loader.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  let {
+    kind,
+    percent,
+  }: {
+    kind: 'active' | 'blank' | 'hidden';
+    percent?: number | null | undefined;
+  } = $props();
+</script>
+
+{#if kind === 'active' && (percent === undefined || percent === null)}
+  <div
+    class="h-[2px] rounded-[2px] bg-white/50 w-full left-0 absolute"
+    style="animation:loadingbar infinite;animation-play-state:playing;animation-duration:2s;animation-timing-function:ease-in-out;"
+  ></div>
+{:else if kind === 'active'}
+  <div
+    class="h-[2px] rounded-[2px] bg-white/20 transition-[all_100ms]"
+    style="width:{Math.min(percent!, 100)}%"
+  ></div>
+{:else if kind === 'blank' || kind === 'hidden'}
+  <div
+    class={{
+      'h-[2px] w-full rounded-[2px]': true,
+      'bg-white/20': kind === 'blank',
+    }}
+  ></div>
+{/if}
-- 
cgit v1.2.3