src/lib/Loader.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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}