From 6dfb6d6c7bc4edb04d45de18779368f3d2f914be Mon Sep 17 00:00:00 2001
From: Mikha Davids <mikhadavids@gmail.com>
Date: Sun, 2 Apr 2023 23:06:59 +0200
Subject: [PATCH] feat: :heavy_plus_sign: added dotSpin animation

---
 src/loading-animations/DotSlide.svelte        |  2 -
 src/loading-animations/DotSpin.svelte         | 63 +++++++++++++++++++
 src/loading-animations/RotateOne.svelte       |  2 +-
 src/loading-animations/index.ts               |  2 +
 .../LoadingAnimation.story.svelte             | 22 ++++++-
 5 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/loading-animations/DotSpin.svelte

diff --git a/src/loading-animations/DotSlide.svelte b/src/loading-animations/DotSlide.svelte
index 0fd6cb1..99dc0f7 100644
--- a/src/loading-animations/DotSlide.svelte
+++ b/src/loading-animations/DotSlide.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { each } from "svelte/internal";
-
 	/**
 	 * The speed of the animation in seconds.
 	 * @default 1
diff --git a/src/loading-animations/DotSpin.svelte b/src/loading-animations/DotSpin.svelte
new file mode 100644
index 0000000..284881a
--- /dev/null
+++ b/src/loading-animations/DotSpin.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	/**
+	 * The number of spinning circles. Must be even.
+	 *
+	 * Min: 2
+	 * @default 2
+	 */
+	export let count = 2;
+	$: count = Math.max(2, count) - (count % 2);
+	/**
+	 * The speed of the animation in seconds.
+	 * @default 1
+	 */
+	export let speed = 1;
+	/**
+	 * Whether the animation should play in reverse.
+	 * @default false
+	 */
+	export let reverse = false;
+	/**
+	 * The radius of the dots.
+	 * @default 15
+	 */
+	export let r = 15;
+</script>
+
+<svg viewBox="0 0 100 100" style:--speed="{speed}s" class:reverse style:--r="{r}px">
+	<circle cx="50" cy="50" />
+	{#key count}
+		{#each new Array(count) as _, i}
+			<circle class="outer" cx="50" cy="50" style:--angle="{(i * 360) / count}deg" />
+		{/each}
+	{/key}
+</svg>
+
+<style lang="scss">
+	circle {
+		--offset: calc(50px - var(--r));
+		r: var(--r);
+		fill: currentcolor;
+		transform-origin: center;
+		transform: translate(
+			calc(cos(var(--angle)) * var(--offset)),
+			calc(sin(var(--angle)) * var(--offset))
+		);
+	}
+	.outer {
+		animation: spin var(--speed) infinite ease-out;
+	}
+	.reverse .outer {
+		animation-direction: reverse;
+		animation-timing-function: ease-in;
+	}
+	@keyframes spin {
+		0%,
+		30% {
+			rotate: 0deg;
+		}
+		to {
+			rotate: 180deg;
+		}
+	}
+</style>
diff --git a/src/loading-animations/RotateOne.svelte b/src/loading-animations/RotateOne.svelte
index 81748f7..a8347b9 100644
--- a/src/loading-animations/RotateOne.svelte
+++ b/src/loading-animations/RotateOne.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	/**
-	 * The number of spinning circles.
+	 * The number of bars.
 	 *
 	 * Min: 1
 	 * @default 2
diff --git a/src/loading-animations/index.ts b/src/loading-animations/index.ts
index 3584331..8a3f424 100644
--- a/src/loading-animations/index.ts
+++ b/src/loading-animations/index.ts
@@ -16,6 +16,7 @@ import Clock from "./Clock.svelte";
 import BlockWave from "./BlockWave.svelte";
 import BlockShuffle from "./BlockShuffle.svelte";
 import DotSlide from "./DotSlide.svelte";
+import DotSpin from "./DotSpin.svelte";
 
 export default {
 	Spin,
@@ -36,4 +37,5 @@ export default {
 	BlockWave,
 	BlockShuffle,
 	DotSlide,
+	DotSpin,
 };
\ No newline at end of file
diff --git a/src/stories/components/Loading Animations/LoadingAnimation.story.svelte b/src/stories/components/Loading Animations/LoadingAnimation.story.svelte
index c2f0a8d..b201f51 100644
--- a/src/stories/components/Loading Animations/LoadingAnimation.story.svelte	
+++ b/src/stories/components/Loading Animations/LoadingAnimation.story.svelte	
@@ -73,9 +73,29 @@
 	let dotSlide_speed = 0.5;
 	let dotSlide_r = 15;
 	let dotSlide_reverse = false;
+
+	let dotSpin_count = 2;
+	let dotSpin_speed = 1;
+	let dotSpin_reverse = false;
+	let dotSpin_r = 15;
 </script>
 
 <Hst.Story title="Loading Animations" icon="mingcute:loading-fill" layout={{ type: "grid" }}>
+	<Hst.Variant title="Dot Spin" icon="ion:more">
+		<Loading.DotSpin
+			bind:count={dotSpin_count}
+			bind:speed={dotSpin_speed}
+			bind:reverse={dotSpin_reverse}
+			bind:r={dotSpin_r}
+		/>
+		<svelte:fragment slot="controls">
+			<Range title="Count" min={2} max={12} step={2} bind:value={dotSpin_count} />
+			<Range title="Speed" min={0.1} max={10} step={0.1} bind:value={dotSpin_speed} />
+			<Range title="Radius" min={1} max={20} step={0.5} bind:value={dotSpin_r} />
+			<Hst.Checkbox title="Reverse" bind:value={dotSpin_reverse} />
+		</svelte:fragment>
+	</Hst.Variant>
+
 	<Hst.Variant title="Dot Slide" icon="ion:more">
 		<Loading.DotSlide
 			bind:speed={dotSlide_speed}
@@ -105,7 +125,7 @@
 	<Hst.Variant title="Block Wave" icon="fe:tiled">
 		<Loading.BlockWave bind:speed={blockWave_speed} bind:count={blockWave_count} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Count" min={1} max={10} bind:value={blockWave_count} />
+			<Hst.Slider title="Count" min={1} max={15} bind:value={blockWave_count} />
 			<Range title="Speed" min={0.1} max={10} step={0.1} bind:value={blockWave_speed} />
 		</svelte:fragment>
 	</Hst.Variant>