Most simple components created

lib/component/loading/various/Wifi.tsx

@@ -0,0 +1,99 @@
+import type { LoadingWifiProps } from "$/types/Loading";
+
+
+export default function Wifi({
+	width,
+	height,
+	className,
+	animationDuration = 0.25,
+	fadeDuration = 0.001,
+	stroke,
+	fill
+}: LoadingWifiProps){
+	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wifi.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,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21"
+				opacity="0"
+				className={className}
+				stroke={stroke}
+				fill={fill}
+			>
+				<animate
+					id={`segment1_1_${id}`}
+					begin={`0;segment1_2_${id}.end+0.2s`}
+					attributeName="opacity"
+					calcMode="discrete"
+					dur={animationDuration}
+					values="0;1"
+					fill="freeze"
+				/>
+				<animate
+					id={`segment1_2_${id}`}
+					begin={`segment3_1_${id}.end+0.5s`}
+					attributeName="opacity"
+					dur={fadeDuration}
+					values="1;0"
+					fill="freeze"
+				/>
+			</path>
+			<path
+				d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z"
+				opacity="0"
+				className={className}
+				stroke={stroke}
+				fill={fill}
+			>
+				<animate
+					id={`segment2_1_${id}`}
+					begin={`segment1_1_${id}.end`}
+					attributeName="opacity"
+					calcMode="discrete"
+					dur={animationDuration}
+					values="0;1"
+					fill="freeze"
+				/>
+				<animate
+					begin={`segment3_1_${id}.end+0.5s`}
+					attributeName="opacity"
+					dur={fadeDuration}
+					values="1;0"
+					fill="freeze"
+				/>
+			</path>
+			<path
+				d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3"
+				opacity="0"
+				className={className}
+				stroke={stroke}
+				fill={fill}
+			>
+				<animate
+					id={`segment3_1_${id}`}
+					begin={`segment2_1_${id}.end`}
+					attributeName="opacity"
+					calcMode="discrete"
+					dur={animationDuration}
+					values="0;1"
+					fill="freeze"
+				/>
+				<animate
+					begin={`segment3_1_${id}.end+0.5s`}
+					attributeName="opacity"
+					dur={fadeDuration}
+					values="1;0"
+					fill="freeze"
+				/>
+			</path>
+		</svg>
+	);
+}