diff options
| author | Wolfgang Müller | 2024-03-05 18:08:09 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2024-03-05 19:25:59 +0100 |
| commit | d1d654ebac2d51e3841675faeb56480e440f622f (patch) | |
| tree | 56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/components/Spinner.svelte | |
| download | hircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz | |
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/components/Spinner.svelte')
| -rw-r--r-- | frontend/src/lib/components/Spinner.svelte | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte new file mode 100644 index 0000000..946329c --- /dev/null +++ b/frontend/src/lib/components/Spinner.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { onDestroy } from 'svelte'; + + let show = false; + const timeout = setTimeout(() => (show = true), 150); + + onDestroy(() => clearTimeout(timeout)); +</script> + +{#if show} + <div class="flex h-full w-full items-center justify-center"> + <span class="spinner" /> + </div> +{/if} + +<style lang="postcss"> + .spinner { + width: 64px; + height: 64px; + border: 5px solid theme(colors.gray.200); + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + } + + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +</style> |