aboutsummaryrefslogtreecommitdiffstats
path: root/src/lib
diff options
context:
space:
mode:
authorLibravatarLarge Libravatar 7222e800-c703-472d-a787-71b6b5cba4ef <memestrogenzone>2025-09-14 17:23:45 +0000
committerLibravatarLarge Libravatar 7222e800-c703-472d-a787-71b6b5cba4ef <memestrogenzone>2025-09-14 17:23:45 +0000
commit807e1cd0f63eb987b714be9cd72020b5eb4ba4ee (patch)
tree1a8e0b35561adea024968a3f19c365f4227db41f /src/lib
parent9da0142529ffb9939ad4c0363923d8bdb28f4821 (diff)
downloadfahrplan-master.tar.gz
fahrplan-master.tar.bz2
fahrplan-master.tar.lz
fahrplan-master.zip

refactor: Extract Loader

HEADmaster
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/Loader.svelte28
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}