Most simple components created

lib/component/loading/drop/DoubleWaveDrop.tsx

@@ -0,0 +1,97 @@
+import type { LoadingPulseProps } from "$/types/Loading";
+
+
+export default function DoubleWaveDrop({
+	width,
+	height,
+	className,
+	animationDuration = 1.2,
+	stroke,
+	fill
+}: LoadingPulseProps){
+	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-2.svg
+	const id = crypto.randomUUID().replaceAll("-", "");
+
+
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
+				transform="translate(12, 12) scale(0)"
+				className={className}
+				stroke={stroke}
+				fill={fill}
+			>
+				<animateTransform
+					id={`drop1_${id}`}
+					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					attributeName="transform"
+					calcMode="spline"
+					type="translate"
+					dur={animationDuration}
+					values="12 12;0 0"
+					keySplines=".52,.6,.25,.99"
+				/>
+				<animateTransform
+					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					attributeName="transform"
+					calcMode="spline"
+					additive="sum"
+					type="scale"
+					dur={animationDuration}
+					values="0;1"
+					keySplines=".52,.6,.25,.99"
+				/>
+				<animate
+					begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
+					attributeName="opacity"
+					calcMode="spline"
+					dur={animationDuration}
+					values="1;0"
+					keySplines=".52,.6,.25,.99"
+				/>
+			</path>
+			<path
+				d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
+				transform="translate(12, 12) scale(0)"
+				className={className}
+				stroke={stroke}
+				fill={fill}
+			>
+				<animateTransform
+					id={`drop2_${id}`}
+					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					attributeName="transform"
+					calcMode="spline"
+					type="translate"
+					dur={animationDuration}
+					values="12 12;0 0"
+					keySplines=".52,.6,.25,.99"
+				/>
+				<animateTransform
+					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					attributeName="transform"
+					calcMode="spline"
+					additive="sum"
+					type="scale"
+					dur={animationDuration}
+					values="0;1"
+					keySplines=".52,.6,.25,.99"
+				/>
+				<animate
+					begin={`drop1_${id}.begin+${animationDuration / 2}s`}
+					attributeName="opacity"
+					calcMode="spline"
+					dur={animationDuration}
+					values="1;0"
+					keySplines=".52,.6,.25,.99"
+				/>
+			</path>
+		</svg>
+	);
+}