added rotate 2; reworked rotate 1

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 {

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>

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";