loader

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={{}} />

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>