Update loading components

lib/component/loading/bar/CircleBars.tsx

@@ -1,21 +1,30 @@
 import type { LoadingBarsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
 
 
 export default function CircleBars({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingBarsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingBarsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-rotate-fade.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"
 		>
@@ -27,8 +36,8 @@ export default function CircleBars({
 					height="5"
 					opacity=".14"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -38,8 +47,8 @@ export default function CircleBars({
 					transform="rotate(30 12 12)"
 					opacity=".29"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -49,8 +58,8 @@ export default function CircleBars({
 					transform="rotate(60 12 12)"
 					opacity=".43"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -60,8 +69,8 @@ export default function CircleBars({
 					transform="rotate(90 12 12)"
 					opacity=".57"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -71,8 +80,8 @@ export default function CircleBars({
 					transform="rotate(120 12 12)"
 					opacity=".71"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -82,8 +91,8 @@ export default function CircleBars({
 					transform="rotate(150 12 12)"
 					opacity=".86"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<rect
 					x="11"
@@ -92,14 +101,14 @@ export default function CircleBars({
 					height="5"
 					transform="rotate(180 12 12)"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
 					calcMode="discrete"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12"
 					repeatCount="indefinite"
 				/>