Update loading components

lib/component/loading/various/SpinningClock.tsx

@@ -1,29 +1,38 @@
 import type { LoadingVariousProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function SpinningClock({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 9,
+	animationDuration = 9000,
+	color,
 	stroke,
-	fill
-}: LoadingVariousProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingVariousProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/clock.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"
 		>
 			<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"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			/>
 			<rect
 				x="11"
@@ -32,13 +41,13 @@ export default function SpinningClock({
 				width="2"
 				height="9"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration / 12}
+					dur={dur / 12}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>
@@ -54,7 +63,7 @@ export default function SpinningClock({
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>