Update loading components

2026-02-24 22:16:46 -05:00
parent a61e7ce19a
commit 637b3a0c34
43 changed files with 1363 additions and 930 deletions
--- a/lib/component/loading/dot/BouncingDots.tsx
+++ b/lib/component/loading/dot/BouncingDots.tsx
@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function BouncingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-bounce.svg?short_path=50864c0
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 		>
@@ -25,15 +35,15 @@ export default function BouncingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstBouncingDots_${id}`}
-					begin={`0;lastBouncingDots_${id}.end+${animationDuration / 2}s`}
+					begin={`0;lastBouncingDots_${id}.end+${dur / 2}s`}
 					attributeName="cy"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;6;12"
 					keySplines=".33,.66,.66,1;.33,0,.66,.33"
 				/>
@@ -43,15 +53,15 @@ export default function BouncingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`secondBouncingDots_${id}`}
-					begin={`firstBouncingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`firstBouncingDots_${id}.begin+${dur / 5}s`}
 					attributeName="cy"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;6;12"
 					keySplines=".33,.66,.66,1;.33,0,.66,.33"
 				/>
@@ -61,15 +71,15 @@ export default function BouncingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`lastBouncingDots_${id}`}
-					begin={`secondBouncingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`secondBouncingDots_${id}.begin+${dur / 5}s`}
 					attributeName="cy"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="12;6;12"
 					keySplines=".33,.66,.66,1;.33,0,.66,.33"
 				/>
--- a/lib/component/loading/dot/CircleCenterDots.tsx
+++ b/lib/component/loading/dot/CircleCenterDots.tsx
@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function CircleCenterDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale-middle.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 		>
@@ -25,15 +35,15 @@ export default function CircleCenterDots({
 				cy="3"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle1_${id}`}
-					begin={`0;circle3_${id}.end-${animationDuration * 5 / 6}s`}
+					begin={`0;circle3_${id}.end-${dur * 5 / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -43,15 +53,15 @@ export default function CircleCenterDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle2_${id}`}
-					begin={`circle1_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle1_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -61,15 +71,15 @@ export default function CircleCenterDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle3_${id}`}
-					begin={`circle5_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle5_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -79,15 +89,15 @@ export default function CircleCenterDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle4_${id}`}
-					begin={`circle2_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle2_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -97,15 +107,15 @@ export default function CircleCenterDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle5_${id}`}
-					begin={`circle7_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle7_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -115,14 +125,14 @@ export default function CircleCenterDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
+				stroke={color ?? stroke}
 			>
 				<animate
 					id={`circle6_${id}`}
-					begin={`circle4_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle4_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -132,15 +142,15 @@ export default function CircleCenterDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle7_${id}`}
-					begin={`circle9_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle9_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -150,15 +160,15 @@ export default function CircleCenterDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle8_${id}`}
-					begin={`circle6_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle6_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -168,15 +178,15 @@ export default function CircleCenterDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle9_${id}`}
-					begin={`circle11_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle11_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -186,15 +196,15 @@ export default function CircleCenterDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle10_${id}`}
-					begin={`circle8_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle8_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -204,15 +214,15 @@ export default function CircleCenterDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`circle11_${id}`}
-					begin={`circle12_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle12_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
@@ -221,16 +231,16 @@ export default function CircleCenterDots({
 				cx="12"
 				cy="21"
 				r="0"
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 				className={className}
 			>
 				<animate
 					id={`circle12_${id}`}
-					begin={`circle10_${id}.begin+${animationDuration / 6}s`}
+					begin={`circle10_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 				/>
--- a/lib/component/loading/dot/CircleFadingDots.tsx
+++ b/lib/component/loading/dot/CircleFadingDots.tsx
@@ -1,19 +1,30 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function CircleFadingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-rotate.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"
 		>
@@ -24,8 +35,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".14"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="16.75"
@@ -33,8 +44,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".29"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="20.23"
@@ -42,8 +53,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".43"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="21.50"
@@ -51,8 +62,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".57"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="20.23"
@@ -60,8 +71,8 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".71"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="16.75"
@@ -69,22 +80,22 @@ export default function CircleFadingDots({
 					r="1.5"
 					opacity=".86"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="12"
 					cy="21.5"
 					r="1.5"
 					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;360 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/dot/CirclePulsingDots.tsx
+++ b/lib/component/loading/dot/CirclePulsingDots.tsx
@@ -1,23 +1,34 @@
 import type { CirclePulsingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function CirclePulsingDots({
+	size,
 	width,
 	height,
 	className,
-	rotationAnimationDuration = 6,
-	growingAnimationDuration = 0.6,
+	rotationAnimationDuration = 6000,
+	growingAnimationDuration = 600,
+	color,
 	stroke,
-	fill
-}: CirclePulsingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<CirclePulsingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/12-dots-scale-rotate.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	const reducedMotion = usePrefersReducedMotion();
+	const rotationAnimationDur = reducedMotion ? rotationAnimationDuration / 100 : rotationAnimationDuration / 1000;
+	const growingAnimationDur = reducedMotion ? growingAnimationDuration / 100 : growingAnimationDuration / 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,15 +38,15 @@ export default function CirclePulsingDots({
 					cy="3"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle1_${id}`}
-						begin={`0;circle3_${id}.end-${growingAnimationDuration * 5 / 6}s`}
+						begin={`0;circle3_${id}.end-${growingAnimationDur * 5 / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -45,15 +56,15 @@ export default function CirclePulsingDots({
 					cy="4.21"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle2_${id}`}
-						begin={`circle1_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle1_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -63,15 +74,15 @@ export default function CirclePulsingDots({
 					cy="4.21"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle3_${id}`}
-						begin={`circle5_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle5_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -81,15 +92,15 @@ export default function CirclePulsingDots({
 					cy="7.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle4_${id}`}
-						begin={`circle2_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle2_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -99,15 +110,15 @@ export default function CirclePulsingDots({
 					cy="7.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle5_${id}`}
-						begin={`circle7_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle7_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -117,15 +128,15 @@ export default function CirclePulsingDots({
 					cy="12.00"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle6_${id}`}
-						begin={`circle4_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle4_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -135,15 +146,15 @@ export default function CirclePulsingDots({
 					cy="12.00"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle7_${id}`}
-						begin={`circle9_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle9_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -153,15 +164,15 @@ export default function CirclePulsingDots({
 					cy="16.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle8_${id}`}
-						begin={`circle6_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle6_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -171,15 +182,15 @@ export default function CirclePulsingDots({
 					cy="16.50"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle9_${id}`}
-						begin={`circle11_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle11_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -189,15 +200,15 @@ export default function CirclePulsingDots({
 					cy="19.79"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle10_${id}`}
-						begin={`circle8_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle8_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -207,15 +218,15 @@ export default function CirclePulsingDots({
 					cy="19.79"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle11_${id}`}
-						begin={`circle12_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle12_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -225,15 +236,15 @@ export default function CirclePulsingDots({
 					cy="21"
 					r="1"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				>
 					<animate
 						id={`circle12_${id}`}
-						begin={`circle10_${id}.begin+${growingAnimationDuration / 6}s`}
+						begin={`circle10_${id}.begin+${growingAnimationDur / 6}s`}
 						attributeName="r"
 						calcMode="spline"
-						dur={growingAnimationDuration}
+						dur={growingAnimationDur}
 						values="1;2;1"
 						keySplines=".27,.42,.37,.99;.53,0,.61,.73"
 					/>
@@ -241,7 +252,7 @@ export default function CirclePulsingDots({
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={rotationAnimationDuration}
+					dur={rotationAnimationDur}
 					values="360 12 12;0 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/dot/CircleRotatingDots.tsx
+++ b/lib/component/loading/dot/CircleRotatingDots.tsx
@@ -1,21 +1,30 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function CircleRotatingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1.5,
+	animationDuration = 1500,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/8-dots-rotate.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"
 		>
@@ -25,69 +34,69 @@ export default function CircleRotatingDots({
 					cy="12"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="21"
 					cy="12"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="12"
 					cy="21"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="12"
 					cy="3"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="5.64"
 					cy="5.64"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="18.36"
 					cy="18.36"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="5.64"
 					cy="18.36"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="18.36"
 					cy="5.64"
 					r="2"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/dot/CircleShrinkingDots.tsx
+++ b/lib/component/loading/dot/CircleShrinkingDots.tsx
@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function CircleShrinkingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.6,
+	animationDuration = 600,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale.svg?short_path=17d1946
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 		>
@@ -25,15 +35,15 @@ export default function CircleShrinkingDots({
 				cy="3"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstShrinkingDot_${id}`}
-					begin={`0;thirdShrinkingDot_${id}.end-${animationDuration * 4 / 5}s`}
+					begin={`0;thirdShrinkingDot_${id}.end-${dur * 4 / 5}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -45,15 +55,15 @@ export default function CircleShrinkingDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`secondShrinkingDot_${id}`}
-					begin={`firstShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`firstShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -65,15 +75,15 @@ export default function CircleShrinkingDots({
 				cy="4.21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`thirdShrinkingDot_${id}`}
-					begin={`fifthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`fifthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -85,15 +95,15 @@ export default function CircleShrinkingDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`fourthShrinkingDot_${id}`}
-					begin={`secondShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`secondShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73" fill="freeze"
@@ -104,15 +114,15 @@ export default function CircleShrinkingDots({
 				cy="7.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`fifthShrinkingDot_${id}`}
-					begin={`seventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`seventhShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -124,15 +134,15 @@ export default function CircleShrinkingDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`sixthShrinkingDot_${id}`}
-					begin={`fourthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`fourthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -144,15 +154,15 @@ export default function CircleShrinkingDots({
 				cy="12.00"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`seventhShrinkingDot_${id}`}
-					begin={`ninthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`ninthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -164,15 +174,15 @@ export default function CircleShrinkingDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`eighthShrinkingDot_${id}`}
-					begin={`sixthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`sixthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -184,15 +194,15 @@ export default function CircleShrinkingDots({
 				cy="16.50"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`ninthShrinkingDot_${id}`}
-					begin={`eleventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`eleventhShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -204,15 +214,15 @@ export default function CircleShrinkingDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`tenthShrinkingDot_${id}`}
-					begin={`eighthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`eighthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -224,15 +234,15 @@ export default function CircleShrinkingDots({
 				cy="19.79"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`eleventhShrinkingDot_${id}`}
-					begin={`twelfthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`twelfthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
@@ -244,15 +254,15 @@ export default function CircleShrinkingDots({
 				cy="21"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`twelfthShrinkingDot_${id}`}
-					begin={`tenthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
+					begin={`tenthShrinkingDot_${id}.begin+${dur / 6}s`}
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					values="0;2;0"
 					keyTimes="0;.2;1"
 					keySplines="0,1,0,1;.53,0,.61,.73"
--- a/lib/component/loading/dot/CircleSpinningDot.tsx
+++ b/lib/component/loading/dot/CircleSpinningDot.tsx
@@ -1,21 +1,33 @@
 import type { CircleSpinningDotProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+

 export default function CircleSpinningDot({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
 	fill,
 	trackClassName = "fill-transparent",
 	trackStroke,
-	trackFill
-}: CircleSpinningDotProps){
+	trackFill,
+	ariaLabel = "Loading"
+}: Readonly<CircleSpinningDotProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/dot-revolve.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"
 		>
@@ -30,13 +42,13 @@ export default function CircleSpinningDot({
 				cy="2.5"
 				r="1.5"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
-					dur={animationDuration}
+					dur={dur}
 					values="0 12 12;360 12 12"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/dot/CyclingDots.tsx
+++ b/lib/component/loading/dot/CyclingDots.tsx
@@ -1,21 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function CyclingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.5,
+	animationDuration = 500,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-move.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 		>
@@ -24,14 +35,14 @@ export default function CyclingDots({
 				cy="12"
 				r="0"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					begin="0;spinner_z0Or.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -40,7 +51,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -49,7 +60,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
@@ -59,7 +70,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -78,14 +89,14 @@ export default function CyclingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					begin="0;spinner_z0Or.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -94,7 +105,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
@@ -104,7 +115,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -121,7 +132,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -132,14 +143,14 @@ export default function CyclingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					begin="0;spinner_z0Or.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
@@ -149,7 +160,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -166,7 +177,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -175,7 +186,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -186,15 +197,15 @@ export default function CyclingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`fourthDotFirstAnimate_${id}`}
 					begin="0;spinner_z0Or.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="3;0"
 					fill="freeze"
@@ -211,7 +222,7 @@ export default function CyclingDots({
 					begin="spinner_OLMs.end"
 					attributeName="r"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="0;3"
 					fill="freeze"
@@ -220,7 +231,7 @@ export default function CyclingDots({
 					begin="spinner_UHR2.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="4;12"
 					fill="freeze"
@@ -229,7 +240,7 @@ export default function CyclingDots({
 					begin="spinner_Aguh.end"
 					attributeName="cx"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1"
 					values="12;20"
 					fill="freeze"
--- a/lib/component/loading/dot/FadingDots.tsx
+++ b/lib/component/loading/dot/FadingDots.tsx
@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function FadingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-fade.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 		>
@@ -26,14 +36,14 @@ export default function FadingDots({
 				r="3"
 				opacity="1"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstFadingDots_${id}`}
-					begin={`0;lastFadingDots_${id}.end-${animationDuration / 3}s`}
+					begin={`0;lastFadingDots_${id}.end-${dur / 3}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -44,14 +54,14 @@ export default function FadingDots({
 				r="3"
 				opacity=".4"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`secondFadingDots_${id}`}
-					begin={`firstFadingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`firstFadingDots_${id}.begin+${dur / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
@@ -62,14 +72,14 @@ export default function FadingDots({
 				r="3"
 				opacity=".3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`lastFadingDots_${id}`}
-					begin={`secondFadingDots_${id}.begin+${animationDuration / 5}s`}
+					begin={`secondFadingDots_${id}.begin+${dur / 5}s`}
 					attributeName="opacity"
-					dur={animationDuration}
+					dur={dur}
 					values="1;.2"
 					fill="freeze"
 				/>
--- a/lib/component/loading/dot/PulsingDots.tsx
+++ b/lib/component/loading/dot/PulsingDots.tsx
@@ -1,19 +1,30 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";


 export default function PulsingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale-middle.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"
 		>
@@ -22,12 +33,12 @@ export default function PulsingDots({
 				cy="12"
 				r="1.5"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;3;1.5"
 					repeatCount="indefinite"
 				/>
@@ -37,12 +48,12 @@ export default function PulsingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;1.5;3"
 					repeatCount="indefinite"
 				/>
@@ -52,12 +63,12 @@ export default function PulsingDots({
 				cy="12"
 				r="1.5"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="1.5;3;1.5"
 					repeatCount="indefinite"
 				/>
--- a/lib/component/loading/dot/RotatingDots.tsx
+++ b/lib/component/loading/dot/RotatingDots.tsx
@@ -1,18 +1,29 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";

 export default function RotatingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 1,
+	animationDuration = 1000,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-rotate.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"
 		>
@@ -21,8 +32,8 @@ export default function RotatingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			/>
 			<g>
 				<circle
@@ -30,22 +41,22 @@ export default function RotatingDots({
 					cy="12"
 					r="3"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<circle
 					cx="20"
 					cy="12"
 					r="3"
 					className={className}
-					stroke={stroke}
-					fill={fill}
+					stroke={color ?? stroke}
+					fill={color ?? fill}
 				/>
 				<animateTransform
 					attributeName="transform"
 					type="rotate"
 					calcMode="spline"
-					dur={animationDuration}
+					dur={dur}
 					keySplines=".36,.6,.31,1;.36,.6,.31,1"
 					values="0 12 12;180 12 12;360 12 12"
 					repeatCount="indefinite"
--- a/lib/component/loading/dot/SwellingDots.tsx
+++ b/lib/component/loading/dot/SwellingDots.tsx
@@ -1,22 +1,32 @@
 import type { LoadingDotsProps } from "$/types/LoadingTypes";
+import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
+import { useId } from "react";


 export default function SwellingDots({
+	size,
 	width,
 	height,
 	className,
-	animationDuration = 0.75,
+	animationDuration = 750,
+	color,
 	stroke,
-	fill
-}: LoadingDotsProps){
+	fill,
+	ariaLabel = "Loading"
+}: Readonly<LoadingDotsProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
+	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"
 		>
@@ -25,14 +35,14 @@ export default function SwellingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`firstDot_${id}`}
-					begin={`0;lastDot_${id}.end-${animationDuration / 3}s`}
+					begin={`0;lastDot_${id}.end-${dur / 3}s`}
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;.2;3"
 				/>
 			</circle>
@@ -41,13 +51,13 @@ export default function SwellingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
-					begin={`firstDot_${id}.end-${animationDuration * 4 / 5}s`}
+					begin={`firstDot_${id}.end-${dur * 4 / 5}s`}
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;.2;3"
 				/>
 			</circle>
@@ -56,14 +66,14 @@ export default function SwellingDots({
 				cy="12"
 				r="3"
 				className={className}
-				stroke={stroke}
-				fill={fill}
+				stroke={color ?? stroke}
+				fill={color ?? fill}
 			>
 				<animate
 					id={`lastDot_${id}`}
-					begin={`firstDot_${id}.end-${animationDuration * 2 / 3}s`}
+					begin={`firstDot_${id}.end-${dur * 2 / 3}s`}
 					attributeName="r"
-					dur={animationDuration}
+					dur={dur}
 					values="3;.2;3"
 				/>
 			</circle>