diff options
author | 2025-09-14 17:23:45 +0000 | |
---|---|---|
committer | 2025-09-14 17:23:45 +0000 | |
commit | 807e1cd0f63eb987b714be9cd72020b5eb4ba4ee (patch) | |
tree | 1a8e0b35561adea024968a3f19c365f4227db41f /src/lib | |
parent | 9da0142529ffb9939ad4c0363923d8bdb28f4821 (diff) | |
download | fahrplan-master.tar.gz fahrplan-master.tar.bz2 fahrplan-master.tar.lz fahrplan-master.zip |
Diffstat (limited to 'src/lib')
-rw-r--r-- | src/lib/Loader.svelte | 28 |
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} |