83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
import type { RubberLoadingSpinnerProps } from "$/types/LoadingTypes";
|
|
import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
|
|
|
|
|
|
export default function RubberSpinner({
|
|
size,
|
|
width,
|
|
height,
|
|
animationDuration = 2000,
|
|
stretchDuration = 1500,
|
|
color,
|
|
className,
|
|
stroke,
|
|
fill = "none",
|
|
trackClassName = "fill-transparent",
|
|
trackStroke,
|
|
trackFill,
|
|
ariaLabel = "Loading"
|
|
}: Readonly<RubberLoadingSpinnerProps>){
|
|
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/ring-resize.svg
|
|
const reducedMotion = usePrefersReducedMotion();
|
|
const animationDur = reducedMotion ? animationDuration / 100 : animationDuration / 1000;
|
|
const stretchDur = reducedMotion ? stretchDuration / 100 : stretchDuration / 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"
|
|
>
|
|
<path
|
|
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
|
|
className={trackClassName}
|
|
stroke={trackStroke}
|
|
fill={trackFill}
|
|
/>
|
|
<g>
|
|
<circle
|
|
cx="12"
|
|
cy="12"
|
|
r="9.5"
|
|
className={className}
|
|
stroke={color ?? stroke}
|
|
fill={color ?? fill}
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dasharray"
|
|
dur={stretchDur}
|
|
calcMode="spline"
|
|
values="0 150;42 150;42 150;42 150"
|
|
keyTimes="0;0.475;0.95;1"
|
|
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
dur={stretchDur}
|
|
calcMode="spline"
|
|
values="0;-16;-59;-59"
|
|
keyTimes="0;0.475;0.95;1"
|
|
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</circle>
|
|
<animateTransform
|
|
attributeName="transform"
|
|
type="rotate"
|
|
dur={animationDur}
|
|
values="0 12 12;360 12 12"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|