Update loading components

lib/component/loading/various/PulsingLine.tsx

@@ -1,21 +1,30 @@
 import type { LoadingVariousProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function PulsingLine({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingVariousProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingVariousProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/gooey-balls-1.svg
+	const reducedMotion = usePrefersReducedMotion();
+	const dur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
 
 
 	return (
 		<svg
-			width={width}
-			height={height}
+			width={size ?? width}
+			height={size ?? height}
+			role="status"
+			aria-live="polite"
+			aria-label={ariaLabel}
 			viewBox="0 0 24 24"
 			xmlns="http://www.w3.org/2000/svg"
 		>
@@ -44,13 +53,13 @@ export default function PulsingLine({
 					cy="12"
 					r="3"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						attributeName="cx"
 						calcMode="spline"
-						dur={animationDuration}
+						dur={dur}
 						values="4;9;4"
 						keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
 						repeatCount="indefinite"
@@ -58,7 +67,7 @@ export default function PulsingLine({
 					<animate
 						attributeName="r"
 						calcMode="spline"
-						dur={animationDuration}
+						dur={dur}
 						values="3;8;3"
 						keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
 						repeatCount="indefinite"
@@ -69,13 +78,13 @@ export default function PulsingLine({
 					cy="12"
 					r="8"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						attributeName="cx"
 						calcMode="spline"
-						dur={animationDuration}
+						dur={dur}
 						values="15;20;15"
 						keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
 						repeatCount="indefinite"
@@ -83,7 +92,7 @@ export default function PulsingLine({
 					<animate
 						attributeName="r"
 						calcMode="spline"
-						dur={animationDuration}
+						dur={dur}
 						values="8;3;8"
 						keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
 						repeatCount="indefinite"