From 42cb792b4ad7aaac7c043449e802f71f4385c44f Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Mon, 9 Dec 2024 16:01:34 -0500
Subject: [PATCH] loader

---
 src/lib/components/Loader.stories.svelte | 12 ++++++
 src/lib/components/Loader.svelte         | 51 ++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/lib/components/Loader.stories.svelte
 create mode 100644 src/lib/components/Loader.svelte

diff --git a/src/lib/components/Loader.stories.svelte b/src/lib/components/Loader.stories.svelte
new file mode 100644
index 0000000..27ef46b
--- /dev/null
+++ b/src/lib/components/Loader.stories.svelte
@@ -0,0 +1,12 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Loader from './Loader.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Loader',
+		component: Loader,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default" args={{}} />
\ No newline at end of file
diff --git a/src/lib/components/Loader.svelte b/src/lib/components/Loader.svelte
new file mode 100644
index 0000000..b855fec
--- /dev/null
+++ b/src/lib/components/Loader.svelte
@@ -0,0 +1,51 @@
+<script lang="ts"></script>
+
+<span class="loader"></span>
+
+<style>
+	.loader {
+		width: 48px;
+		height: 48px;
+		border: 3px dotted #fff;
+		border-style: solid solid dotted dotted;
+		border-radius: 50%;
+		display: inline-block;
+		position: relative;
+		box-sizing: border-box;
+		animation: rotation 2s linear infinite;
+	}
+	.loader::after {
+		content: '';
+		box-sizing: border-box;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		border: 3px dotted #ff3d00;
+		border-style: solid solid dotted;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		animation: rotationBack 1s linear infinite;
+		transform-origin: center center;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes rotationBack {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(-360deg);
+		}
+	}
+</style>
\ No newline at end of file