From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 frontend/src/lib/components/Spinner.svelte | 36 ++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 frontend/src/lib/components/Spinner.svelte

(limited to 'frontend/src/lib/components/Spinner.svelte')

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>
-- 
cgit v1.2.3-2-gb3c3