diff options
Diffstat (limited to 'frontend/src/lib/components/Spinner.svelte')
| -rw-r--r-- | frontend/src/lib/components/Spinner.svelte | 27 |
1 files changed, 3 insertions, 24 deletions
diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte index 946329c..d85c4f4 100644 --- a/frontend/src/lib/components/Spinner.svelte +++ b/frontend/src/lib/components/Spinner.svelte @@ -1,7 +1,7 @@ <script lang="ts"> import { onDestroy } from 'svelte'; - let show = false; + let show = $state(false); const timeout = setTimeout(() => (show = true), 150); onDestroy(() => clearTimeout(timeout)); @@ -9,28 +9,7 @@ {#if show} <div class="flex h-full w-full items-center justify-center"> - <span class="spinner" /> + <span class="h-16 w-16 animate-spin rounded-full border-4 border-white/80 border-b-transparent" + ></span> </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> |