Most simple components created

lib/component/loading/various/BouncingDot.tsx

@@ -0,0 +1,79 @@
+import type { LoadingVariousProps } from "$/types/Loading";
+
+
+export default function BouncingDot({
+	width,
+	height,
+	className,
+	animationDuration = 0.9,
+	stroke,
+	fill
+}: LoadingVariousProps){
+	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bouncing-ball.svg
+	const id = crypto.randomUUID().replaceAll("-", "");
+
+
+	return (
+		<svg
+		width={width}
+		height={height}
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<ellipse
+			cx="12"
+			cy="5"
+			rx="4"
+			ry="4"
+			className={className}
+			stroke={stroke}
+			fill={fill}
+		>
+			<animate
+				id={`dot1_1_${id}`}
+				begin={`0;dot1_5_${id}.end`}
+				attributeName="cy"
+				calcMode="spline"
+				dur={animationDuration * 5 / 12}
+				values="5;20"
+				keySplines=".33,0,.66,.33"
+				fill="freeze"
+			/>
+			<animate
+				begin={`dot1_1_${id}.end`}
+				attributeName="rx"
+				calcMode="spline"
+				dur={animationDuration / 18}
+				values="4;4.8;4"
+				keySplines=".33,0,.66,.33;.33,.66,.66,1"
+			/>
+			<animate
+				begin={`dot1_1_${id}.end`}
+				attributeName="ry"
+				calcMode="spline"
+				dur={animationDuration / 18}
+				values="4;3;4"
+				keySplines=".33,0,.66,.33;.33,.66,.66,1"
+			/>
+			<animate
+				id={`dot1_4_${id}`}
+				begin={`dot1_1_${id}.end`}
+				attributeName="cy"
+				calcMode="spline"
+				dur={animationDuration / 36}
+				values="20;20.5"
+				keySplines=".33,0,.66,.33"
+			/>
+			<animate
+				id={`dot1_5_${id}`}
+				begin={`dot1_4_${id}.end`}
+				attributeName="cy"
+				calcMode="spline"
+				dur={animationDuration * 4 / 9}
+				values="20.5;5"
+				keySplines=".33,.66,.66,1"
+			/>
+		</ellipse>
+	</svg>
+	);
+}