165 lines
3.2 KiB
TypeScript
165 lines
3.2 KiB
TypeScript
import type { LoadingBlocksProps } from "$/types/LoadingTypes";
|
|
import { usePrefersReducedMotion } from "$/util/AccessibilityUtil";
|
|
import { useId } from "react";
|
|
|
|
|
|
export default function SlidingBlocks3({
|
|
size,
|
|
width,
|
|
height,
|
|
className,
|
|
animationDuration = 200,
|
|
color,
|
|
stroke,
|
|
fill,
|
|
ariaLabel = "Loading"
|
|
}: Readonly<LoadingBlocksProps>){
|
|
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-3.svg
|
|
const id = useId();
|
|
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"
|
|
>
|
|
<rect
|
|
x="1"
|
|
y="1"
|
|
rx="1"
|
|
width="10"
|
|
height="10"
|
|
className={className}
|
|
stroke={color ?? stroke}
|
|
fill={color ?? fill}
|
|
>
|
|
<animate
|
|
id={`rectangle1_1_${id}`}
|
|
begin={`0;rectangle3_4_${id}.end`}
|
|
attributeName="x"
|
|
dur={dur}
|
|
values="1;13"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle1_2_${id}`}
|
|
begin={`rectangle3_1_${id}.end`}
|
|
attributeName="y"
|
|
dur={dur}
|
|
values="1;13"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle1_3_${id}`}
|
|
begin={`rectangle3_2_${id}.end`}
|
|
attributeName="x"
|
|
dur={dur}
|
|
values="13;1"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle1_4_${id}`}
|
|
begin={`rectangle3_3_${id}.end`}
|
|
attributeName="y"
|
|
dur={dur}
|
|
values="13;1"
|
|
fill="freeze"
|
|
/>
|
|
</rect>
|
|
<rect
|
|
x="1"
|
|
y="13"
|
|
rx="1"
|
|
width="10"
|
|
height="10"
|
|
className={className}
|
|
stroke={color ?? stroke}
|
|
fill={color ?? fill}
|
|
>
|
|
<animate
|
|
id={`rectangle2_1_${id}`}
|
|
begin={`rectangle1_1_${id}.end`}
|
|
attributeName="y"
|
|
dur={dur}
|
|
values="13;1"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle2_2_${id}`}
|
|
begin={`rectangle1_2_${id}.end`}
|
|
attributeName="x"
|
|
dur={dur}
|
|
values="1;13"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle2_3_${id}`}
|
|
begin={`rectangle1_3_${id}.end`}
|
|
attributeName="y"
|
|
dur={dur}
|
|
values="1;13"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle2_4_${id}`}
|
|
begin={`rectangle1_4_${id}.end`}
|
|
attributeName="x"
|
|
dur={dur}
|
|
values="13;1"
|
|
fill="freeze"
|
|
/>
|
|
</rect>
|
|
<rect
|
|
x="13"
|
|
y="13"
|
|
rx="1"
|
|
width="10"
|
|
height="10"
|
|
className={className}
|
|
stroke={color ?? stroke}
|
|
fill={color ?? fill}
|
|
>
|
|
<animate
|
|
id={`rectangle3_1_${id}`}
|
|
begin={`rectangle2_1_${id}.end`}
|
|
attributeName="x"
|
|
dur={dur}
|
|
values="13;1"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle3_2_${id}`}
|
|
begin={`rectangle2_2_${id}.end`}
|
|
attributeName="y"
|
|
dur={dur}
|
|
values="13;1"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle3_3_${id}`}
|
|
begin={`rectangle2_3_${id}.end`}
|
|
attributeName="x"
|
|
dur={dur}
|
|
values="1;13"
|
|
fill="freeze"
|
|
/>
|
|
<animate
|
|
id={`rectangle3_4_${id}`}
|
|
begin={`rectangle2_4_${id}.end`}
|
|
attributeName="y"
|
|
dur={dur}
|
|
values="1;13"
|
|
fill="freeze"
|
|
/>
|
|
</rect>
|
|
</svg>
|
|
);
|
|
}
|