1 files changed, 28 insertions, 0 deletions
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}