From b85573a64d0d7786e8e7e5c8c125c59e152bdc38 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 28 Nov 2021 16:44:51 +0100
Subject: [PATCH] front: add Loader component

---
 src/assets/views/components/Loader.svelte | 69 +++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/assets/views/components/Loader.svelte

diff --git a/src/assets/views/components/Loader.svelte b/src/assets/views/components/Loader.svelte
new file mode 100644
index 0000000..7101a67
--- /dev/null
+++ b/src/assets/views/components/Loader.svelte
@@ -0,0 +1,69 @@
+<script>
+    import {fade} from 'svelte/transition';
+
+    export let show = true;
+    export let size = '72px';
+</script>
+
+<style lang="scss">
+	.loader {
+		position: fixed;
+		z-index: 10000;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		background: var(--background-color);
+
+		.parts {
+			--size: 72px;
+			position: relative;
+			width: var(--size);
+			height: var(--size);
+
+			.bg-circle {
+				opacity: 0.5;
+			}
+
+			.fg-arc {
+				border-top: 8px solid transparent;
+				border-left: 8px solid transparent;
+				border-bottom: 8px solid transparent;
+
+				animation: infinite linear 2s spin;
+			}
+
+			> * {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+
+				border: 8px solid #fff;
+				border-radius: 100%;
+			}
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>
+
+{#if show}
+    <div class="loader" style="--size: {size};" transition:fade={{duration: 50}}>
+        <div class="parts">
+            <div class="bg-circle"></div>
+            <div class="fg-arc"></div>
+        </div>
+    </div>
+{/if}
\ No newline at end of file