diff options
Diffstat (limited to '')
| -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> |