105 lines
2.2 KiB
TypeScript
105 lines
2.2 KiB
TypeScript
import type { LoadingVariousProps } from "$/types/LoadingTypes";
|
|
import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
|
|
|
|
|
|
export default function PulsingLine({
|
|
size,
|
|
width,
|
|
height,
|
|
className,
|
|
animationDuration = 750,
|
|
color,
|
|
stroke,
|
|
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={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"
|
|
>
|
|
<defs>
|
|
<filter id="spinner-gF00">
|
|
<feGaussianBlur
|
|
in="SourceGraphic"
|
|
stdDeviation="1.5"
|
|
result="y"
|
|
/>
|
|
<feColorMatrix
|
|
in="y"
|
|
mode="matrix"
|
|
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
|
|
result="z"
|
|
/>
|
|
<feBlend
|
|
in="SourceGraphic"
|
|
in2="z"
|
|
/>
|
|
</filter>
|
|
</defs>
|
|
<g filter="url(#spinner-gF00)">
|
|
<circle
|
|
cx="4"
|
|
cy="12"
|
|
r="3"
|
|
className={className}
|
|
stroke={color ?? stroke}
|
|
fill={color ?? fill}
|
|
>
|
|
<animate
|
|
attributeName="cx"
|
|
calcMode="spline"
|
|
dur={dur}
|
|
values="4;9;4"
|
|
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="r"
|
|
calcMode="spline"
|
|
dur={dur}
|
|
values="3;8;3"
|
|
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
<circle
|
|
cx="15"
|
|
cy="12"
|
|
r="8"
|
|
className={className}
|
|
stroke={color ?? stroke}
|
|
fill={color ?? fill}
|
|
>
|
|
<animate
|
|
attributeName="cx"
|
|
calcMode="spline"
|
|
dur={dur}
|
|
values="15;20;15"
|
|
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="r"
|
|
calcMode="spline"
|
|
dur={dur}
|
|
values="8;3;8"
|
|
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|