From 9dcb26fe5ca184aaf5b23f8a1fce5a79433b98f4 Mon Sep 17 00:00:00 2001
From: mikha <mikhadavids@gmail.com>
Date: Fri, 19 Apr 2024 23:45:36 +0200
Subject: [PATCH] added rotate 2; reworked rotate 1

---
 src/loading-animations/RotateOne.svelte       |  19 +-
 src/loading-animations/RotateTwo.svelte       |  68 ++++++
 src/loading-animations/index.ts               |   1 +
 .../LoadingAnimation.story.svelte             | 229 +++++++++++++-----
 4 files changed, 252 insertions(+), 65 deletions(-)
 create mode 100644 src/loading-animations/RotateTwo.svelte

diff --git a/src/loading-animations/RotateOne.svelte b/src/loading-animations/RotateOne.svelte
index a8347b9..1bd0fcb 100644
--- a/src/loading-animations/RotateOne.svelte
+++ b/src/loading-animations/RotateOne.svelte
@@ -28,14 +28,25 @@
 	 */
 	export let length = 25;
 	$: length = Math.max(1, length);
+
+	/**
+	 * Whether the line caps are rounded.
+	 * @default false
+	 */
+	export let round = false;
+	/**
+	 * The offset from the center.
+	 * @default 25
+	 */
+	export let offset = 25;
 </script>
 
 <svg viewBox="0 0 100 100" style:--speed="{speed}s" style:--width="{width}px">
-	<g style="stroke-dasharray: {length} {50 - length}; stroke-dashoffset: {length}">
-		{#key count}
+	<g stroke-linecap={round ? "round" : "butt"}>
+		{#key count + length + Number(round)}
 			{#each Array(count) as _, i}
 				<path
-					d="M0 0V50"
+					d="M50 {50 + offset}v{length}"
 					style:--angle="{(i * 360) / count}deg"
 					style:--delay="{(speed / count) * i}s"
 				/>
@@ -52,7 +63,7 @@
 		stroke-width: var(--width);
 		stroke: currentcolor;
 		transform-origin: center;
-		transform: rotate(var(--angle)) translate(50%, 50%);
+		transform: rotate(var(--angle));
 		animation: fade var(--speed) var(--delay) linear infinite;
 	}
 	@keyframes fade {
diff --git a/src/loading-animations/RotateTwo.svelte b/src/loading-animations/RotateTwo.svelte
new file mode 100644
index 0000000..6bd8eea
--- /dev/null
+++ b/src/loading-animations/RotateTwo.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	/**
+	 * The number of bars.
+	 *
+	 * Min: 1
+	 * @default 2
+	 */
+	export let count = 2;
+	$: count = Math.max(1, count);
+	/**
+	 * The speed of the animation in seconds.
+	 * @default 2
+	 */
+	export let speed = 2;
+	/**
+	 * The width of the bars.
+	 *
+	 * Min: 1
+	 * @default 10
+	 */
+	export let radius = 4;
+	/**
+	 * The offset from the center.
+	 * @default 25
+	 */
+	export let offset = 25;
+</script>
+
+<svg
+	viewBox="0 0 100 100"
+	style:--speed="{speed}s"
+	style:--offset="{offset}px"
+	style:--r="{radius}px"
+>
+	<g>
+		{#key count + radius + speed}
+			{#each Array(count) as _, i}
+				<circle
+					cx="50"
+					cy="50"
+					style:--angle="{(i * 360) / count}deg"
+					style:--delay="{(speed / count) * i}s"
+				/>
+			{/each}
+		{/key}
+	</g>
+</svg>
+
+<style lang="scss">
+	g {
+		transform-origin: center;
+	}
+	circle {
+		fill: currentcolor;
+		transform-origin: center;
+		transform: rotate(var(--angle)) translateX(var(--offset));
+		animation: fade var(--speed) var(--delay) linear infinite;
+	}
+	@keyframes fade {
+		0% {
+			r: var(--r);
+		}
+		75%,
+		100% {
+			r: 0;
+		}
+	}
+</style>
diff --git a/src/loading-animations/index.ts b/src/loading-animations/index.ts
index 8177001..1d55ef2 100644
--- a/src/loading-animations/index.ts
+++ b/src/loading-animations/index.ts
@@ -12,6 +12,7 @@ export { default as Heart } from "./Heart.svelte";
 export { default as Hourglass } from "./Hourglass.svelte";
 export { default as HeartOutline } from "./HeartOutline.svelte";
 export { default as RotateOne } from "./RotateOne.svelte";
+export { default as RotateTwo } from "./RotateTwo.svelte";
 export { default as Clock } from "./Clock.svelte";
 export { default as BlockWave } from "./BlockWave.svelte";
 export { default as BlockShuffle } from "./BlockShuffle.svelte";
diff --git a/src/stories/components/Loading Animations/LoadingAnimation.story.svelte b/src/stories/components/Loading Animations/LoadingAnimation.story.svelte
index 8b1d100..60e1d23 100644
--- a/src/stories/components/Loading Animations/LoadingAnimation.story.svelte	
+++ b/src/stories/components/Loading Animations/LoadingAnimation.story.svelte	
@@ -5,20 +5,20 @@
 
 	export let Hst: Hst;
 
-	let spin_speed = 3;
+	let spin_duration = 3;
 	let spin_scale = 0.25;
 	let spin_border_width = 0;
 
-	let shrink_speed = 2;
+	let shrink_duration = 2;
 	let shrink_reverse = false;
 
-	let grow_speed = 2;
+	let grow_duration = 2;
 	let grow_reverse = false;
 
-	let slide_speed = 4;
+	let slide_duration = 4;
 	let slide_reverse = false;
 
-	let oscillate_speed = 2;
+	let oscillate_duration = 2;
 	let oscillate_count = 5;
 	let oscillate_width = 50;
 	let oscillate_bar_width = 6;
@@ -27,54 +27,61 @@
 	let spinCircles_merge = 0.9;
 	let spinCircles_r = 10;
 	let spinCircles_r2 = 15;
-	let spinCircles_speed = 1;
+	let spinCircles_duration = 1;
 	let spinCircles_reverse = false;
 
-	let spinGlass_speed = 1;
+	let spinGlass_duration = 1;
 	let spinGlass_rotations = 3;
 	let spinGlass_reverse = false;
 
-	let dualBalls_speed = 1;
+	let dualBalls_duration = 1;
 	let dualBalls_reverse = false;
 
 	let dna_count = 10;
 	let dna_r = 4;
 	let dna_r2 = 2;
 	let dna_height = 36;
-	let dna_speed = 1;
+	let dna_duration = 1;
 
 	let pie_count = 8;
-	let pie_speed = 1;
+	let pie_duration = 1;
 	let pie_scale = 0.5;
 	let pie_reverse = false;
 
-	let heart_speed = 1.5;
+	let heart_duration = 1.5;
 
-	let heartOutline_speed = 2;
+	let heartOutline_duration = 2;
 	let heartOutline_reverse = false;
 
-	let hourglass_speed = 1;
+	let hourglass_duration = 1;
 
-	let rotateOne_speed = 1;
-	let rotateOne_count = 12;
+	let rotateOne_duration = 1;
+	let rotateOne_count = 10;
 	let rotateOne_width = 10;
 	let rotateOne_length = 25;
+	let rotateOne_offset = 25;
+	let rotateOne_round = false;
 
-	let clock_speed = 1;
+	let rotateTwo_duration = 1;
+	let rotateTwo_count = 10;
+	let rotateTwo_radius = 10;
+	let rotateTwo_offset = 35;
 
-	let blockWave_speed = 2;
+	let clock_duration = 1;
+
+	let blockWave_duration = 2;
 	let blockWave_count = 4;
 
-	let blockShuffle_speed = 2;
+	let blockShuffle_duration = 2;
 	let blockShuffle_count = 3;
 	let blockShuffle_br = 10;
 
-	let dotSlide_speed = 0.5;
+	let dotSlide_duration = 0.5;
 	let dotSlide_r = 15;
 	let dotSlide_reverse = false;
 
 	let dotSpin_count = 2;
-	let dotSpin_speed = 1;
+	let dotSpin_duration = 1;
 	let dotSpin_reverse = false;
 	let dotSpin_r = 15;
 </script>
@@ -83,13 +90,13 @@
 	<Hst.Variant title="Pie" icon="game-icons:swirled-shell">
 		<Loading.Pie
 			bind:count={pie_count}
-			bind:speed={pie_speed}
+			bind:speed={pie_duration}
 			bind:scale={pie_scale}
 			bind:reverse={pie_reverse}
 		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Count" min={2} max={50} bind:value={pie_count} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={pie_speed} />
+			<Hst.Slider title="Duration" min={0.1} max={10} step={0.1} bind:value={pie_duration} />
 			<Hst.Slider title="Scale" min={0.1} max={0.9} step={0.1} bind:value={pie_scale} />
 			<Hst.Checkbox title="Reverse" bind:value={pie_reverse} />
 		</svelte:fragment>
@@ -101,20 +108,20 @@
 			bind:r={dna_r}
 			bind:r2={dna_r2}
 			bind:height={dna_height}
-			bind:speed={dna_speed}
+			bind:speed={dna_duration}
 		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Count" min={1} max={50} bind:value={dna_count} />
 			<Hst.Slider title="Height" min={0} max={100} bind:value={dna_height} />
 			<Hst.Slider title="Radius from" min={1} max={10} bind:value={dna_r} />
 			<Hst.Slider title="Radius to" min={1} max={10} bind:value={dna_r2} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={dna_speed} />
+			<Hst.Slider title="Duration" min={0.1} max={10} step={0.1} bind:value={dna_duration} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Block Shuffle" icon="zondicons:view-tile">
 		<Loading.BlockShuffle
-			bind:speed={blockShuffle_speed}
+			bind:speed={blockShuffle_duration}
 			bind:count={blockShuffle_count}
 			bind:border_radius={blockShuffle_br}
 		/>
@@ -122,77 +129,141 @@
 			<Hst.Slider title="Count" min={1} max={3} bind:value={blockShuffle_count} />
 			<Hst.Slider title="Border Radius %" min={0} max={50} bind:value={blockShuffle_br} />
 			<Hst.Slider
-				title="Speed"
+				title="Duration"
 				min={0.1}
 				max={10}
 				step={0.1}
-				bind:value={blockShuffle_speed}
+				bind:value={blockShuffle_duration}
 			/>
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Block Wave" icon="fe:tiled">
-		<Loading.BlockWave bind:speed={blockWave_speed} bind:count={blockWave_count} />
+		<Loading.BlockWave bind:speed={blockWave_duration} bind:count={blockWave_count} />
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Count" min={1} max={15} bind:value={blockWave_count} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={blockWave_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={blockWave_duration}
+			/>
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Clock" icon="ic:baseline-access-time">
-		<Loading.Clock bind:speed={clock_speed} />
+		<Loading.Clock bind:speed={clock_duration} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={clock_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={clock_duration}
+			/>
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Rotate 1" icon="ph:circle-dashed-bold">
 		<Loading.RotateOne
-			bind:speed={rotateOne_speed}
+			bind:speed={rotateOne_duration}
 			bind:count={rotateOne_count}
 			bind:width={rotateOne_width}
 			bind:length={rotateOne_length}
+			bind:round={rotateOne_round}
+			bind:offset={rotateOne_offset}
 		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Count" min={1} max={25} bind:value={rotateOne_count} />
 			<Hst.Slider title="Width" min={1} max={50} bind:value={rotateOne_width} />
 			<Hst.Slider title="Length" min={1} max={50} bind:value={rotateOne_length} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={rotateOne_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={rotateOne_duration}
+			/>
+			<Hst.Slider title="Offset" min={0} max={50} bind:value={rotateOne_offset} />
+			<Hst.Checkbox title="Round" bind:value={rotateOne_round} />
+		</svelte:fragment>
+	</Hst.Variant>
+
+	<Hst.Variant title="Rotate 2" icon="ph:circle-dashed-bold">
+		<Loading.RotateTwo
+			bind:speed={rotateTwo_duration}
+			bind:count={rotateTwo_count}
+			bind:radius={rotateTwo_radius}
+			bind:offset={rotateTwo_offset}
+		/>
+		<svelte:fragment slot="controls">
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={rotateTwo_duration}
+			/>
+			<Hst.Slider title="Count" min={1} max={25} bind:value={rotateTwo_count} />
+			<Hst.Slider title="Radius" min={1} max={15} bind:value={rotateTwo_radius} />
+			<Hst.Slider title="Offset" min={0} max={50} bind:value={rotateTwo_offset} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Hourglass" icon="ic:round-hourglass-bottom">
-		<Loading.Hourglass bind:speed={hourglass_speed} />
+		<Loading.Hourglass bind:speed={hourglass_duration} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={hourglass_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={hourglass_duration}
+			/>
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Heart Outline" icon="material-symbols:favorite">
-		<Loading.HeartOutline bind:speed={heartOutline_speed} bind:reverse={heartOutline_reverse} />
+		<Loading.HeartOutline
+			bind:speed={heartOutline_duration}
+			bind:reverse={heartOutline_reverse}
+		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider
-				title="Speed"
+				title="Duration"
 				min={0.1}
 				max={10}
 				step={0.1}
-				bind:value={heartOutline_speed}
+				bind:value={heartOutline_duration}
 			/>
 			<Hst.Checkbox title="Reverse" bind:value={heartOutline_reverse} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Heart" icon="material-symbols:favorite">
-		<Loading.Heart bind:speed={heart_speed} />
+		<Loading.Heart bind:speed={heart_duration} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={heart_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={heart_duration}
+			/>
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="DualBalls" icon="ic:baseline-circle">
-		<Loading.DualBalls bind:speed={dualBalls_speed} bind:reverse={dualBalls_reverse} />
+		<Loading.DualBalls bind:speed={dualBalls_duration} bind:reverse={dualBalls_reverse} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={dualBalls_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={dualBalls_duration}
+			/>
 			<Hst.Checkbox title="Reverse" bind:value={dualBalls_reverse} />
 		</svelte:fragment>
 	</Hst.Variant>
@@ -200,19 +271,25 @@
 	<Hst.Variant title="Spin Glass" icon="ph:hourglass-fill">
 		<Loading.SpinGlass
 			bind:rotations={spinGlass_rotations}
-			bind:speed={spinGlass_speed}
+			bind:speed={spinGlass_duration}
 			bind:reverse={spinGlass_reverse}
 		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Rotations" min={1} max={10} bind:value={spinGlass_rotations} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={spinGlass_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={spinGlass_duration}
+			/>
 			<Hst.Checkbox title="Reverse" bind:value={spinGlass_reverse} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Spin Circles" icon="ic:baseline-circle">
 		<Loading.SpinCircles
-			bind:speed={spinCircles_speed}
+			bind:speed={spinCircles_duration}
 			bind:count={spinCircles_count}
 			bind:merge={spinCircles_merge}
 			bind:r={spinCircles_r}
@@ -224,11 +301,11 @@
 			<Hst.Slider title="Radius from" min={1} max={20} bind:value={spinCircles_r} />
 			<Hst.Slider title="Radius to" min={1} max={20} bind:value={spinCircles_r2} />
 			<Hst.Slider
-				title="Speed"
+				title="Duration"
 				min={0.1}
 				max={10}
 				step={0.1}
-				bind:value={spinCircles_speed}
+				bind:value={spinCircles_duration}
 			/>
 			<Hst.Slider
 				title="Merge Factor"
@@ -243,39 +320,57 @@
 
 	<Hst.Variant title="Oscillate" icon="cil:audio-spectrum">
 		<Loading.Oscillate
-			bind:speed={oscillate_speed}
+			bind:speed={oscillate_duration}
 			bind:count={oscillate_count}
 			bind:width={oscillate_width}
 			bind:bar_width={oscillate_bar_width}
 		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Count" min={1} max={21} step={2} bind:value={oscillate_count} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={oscillate_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={oscillate_duration}
+			/>
 			<Hst.Slider title="Width" min={1} max={100} bind:value={oscillate_width} />
 			<Hst.Slider title="Bar Width" min={2} max={12} bind:value={oscillate_bar_width} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Slide" icon="teenyicons:layers-subtract-outline">
-		<Loading.Slide bind:speed={slide_speed} bind:reverse={slide_reverse} />
+		<Loading.Slide bind:speed={slide_duration} bind:reverse={slide_reverse} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={slide_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={slide_duration}
+			/>
 			<Hst.Checkbox title="Reverse" bind:value={slide_reverse} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Grow" icon="gg:extension">
-		<Loading.Grow bind:speed={grow_speed} bind:reverse={grow_reverse} />
+		<Loading.Grow bind:speed={grow_duration} bind:reverse={grow_reverse} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={grow_speed} />
+			<Hst.Slider title="Duration" min={0.1} max={10} step={0.1} bind:value={grow_duration} />
 			<Hst.Checkbox title="Reverse" bind:value={grow_reverse} />
 		</svelte:fragment>
 	</Hst.Variant>
 
 	<Hst.Variant title="Shrink" icon="gg:extension">
-		<Loading.Shrink bind:speed={shrink_speed} bind:reverse={shrink_reverse} />
+		<Loading.Shrink bind:speed={shrink_duration} bind:reverse={shrink_reverse} />
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={shrink_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={shrink_duration}
+			/>
 			<Hst.Checkbox title="Reverse" bind:value={shrink_reverse} />
 		</svelte:fragment>
 	</Hst.Variant>
@@ -283,11 +378,11 @@
 	<Hst.Variant title="Spin" icon="mdi:square-circle">
 		<Loading.Spin
 			bind:scale={spin_scale}
-			bind:speed={spin_speed}
+			bind:speed={spin_duration}
 			bind:border_width={spin_border_width}
 		/>
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={spin_speed} />
+			<Hst.Slider title="Duration" min={0.1} max={10} step={0.1} bind:value={spin_duration} />
 			<Hst.Slider title="Scale" min={0.1} max={1} step={0.1} bind:value={spin_scale} />
 			<Hst.Slider title="Border Width" min={0} max={10} bind:value={spin_border_width} />
 		</svelte:fragment>
@@ -296,13 +391,19 @@
 	<Hst.Variant title="Dot Spin" icon="ion:more">
 		<Loading.DotSpin
 			bind:count={dotSpin_count}
-			bind:speed={dotSpin_speed}
+			bind:speed={dotSpin_duration}
 			bind:reverse={dotSpin_reverse}
 			bind:r={dotSpin_r}
 		/>
 		<svelte:fragment slot="controls">
 			<Hst.Slider title="Count" min={2} max={12} step={2} bind:value={dotSpin_count} />
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={dotSpin_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={dotSpin_duration}
+			/>
 			<Hst.Slider title="Radius" min={1} max={20} step={0.5} bind:value={dotSpin_r} />
 			<Hst.Checkbox title="Reverse" bind:value={dotSpin_reverse} />
 		</svelte:fragment>
@@ -310,12 +411,18 @@
 
 	<Hst.Variant title="Dot Slide" icon="ion:more">
 		<Loading.DotSlide
-			bind:speed={dotSlide_speed}
+			bind:speed={dotSlide_duration}
 			bind:r={dotSlide_r}
 			bind:reverse={dotSlide_reverse}
 		/>
 		<svelte:fragment slot="controls">
-			<Hst.Slider title="Speed" min={0.1} max={10} step={0.1} bind:value={dotSlide_speed} />
+			<Hst.Slider
+				title="Duration"
+				min={0.1}
+				max={10}
+				step={0.1}
+				bind:value={dotSlide_duration}
+			/>
 			<Hst.Slider title="Radius" min={1} max={20} step={0.5} bind:value={dotSlide_r} />
 			<Hst.Checkbox title="Reverse" bind:value={dotSlide_reverse} />
 		</svelte:fragment>