From 7472f96b5d776df3d2b146e1b666e55839ed6d6d Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 3 Jul 2024 11:01:58 +0100
Subject: [PATCH] Add inline loading spinner component

---
 src/lib/navigation/InLineLoading.svelte | 28 +++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/lib/navigation/InLineLoading.svelte

diff --git a/src/lib/navigation/InLineLoading.svelte b/src/lib/navigation/InLineLoading.svelte
new file mode 100644
index 0000000..1de0478
--- /dev/null
+++ b/src/lib/navigation/InLineLoading.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    export let size: string = "1em";
+    export let color: string = "aliceblue";
+</script>
+
+<div class="spinner" style="--spinner-size: {size}; --spinner-color: {color};" />
+
+<style>
+    .spinner {
+        display: inline-block;
+        width: var(--spinner-size);
+        height: var(--spinner-size);
+        border: 2px solid transparent;
+        border-top-color: var(--spinner-color);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 10px;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>