BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 21:53:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Most simple components created

Browse Source
This commit is contained in:
Mattrixwv
2025-07-18 23:30:48 -04:00
commit 5421c2346a
134 changed files with 13805 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
lib/component/loading/dot/CyclingDots.tsx Normal file
View File

@@ -0,0 +1,240 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function CyclingDots({
width,
height,
className,
animationDuration = 0.5,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-move.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="4"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin="0;spinner_z0Or.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="0;3"
fill="freeze"
/>
<animate
begin="spinner_OLMs.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="4;12"
fill="freeze"
/>
<animate
begin="spinner_UHR2.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="12;20"
fill="freeze"
/>
<animate
id={`firstDotFourthAnimate_${id}`}
begin="spinner_Aguh.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="3;0"
fill="freeze"
/>
<animate
id="spinner_z0Or"
begin={`firstDotFourthAnimate_${id}.end`}
attributeName="cx"
dur="0.001s"
values="20;4"
fill="freeze"
/>
</circle>
<circle
cx="4"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin="0;spinner_z0Or.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="4;12"
fill="freeze"
/>
<animate
begin="spinner_OLMs.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="12;20"
fill="freeze"
/>
<animate
id={`secondDotThirdAnimate_${id}`}
begin="spinner_UHR2.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="3;0"
fill="freeze"
/>
<animate
id="spinner_Aguh"
begin={`secondDotThirdAnimate_${id}.end`}
attributeName="cx"
dur="0.001s"
values="20;4"
fill="freeze"
/>
<animate
begin="spinner_Aguh.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="0;3"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin="0;spinner_z0Or.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="12;20"
fill="freeze"
/>
<animate
id={`thirdDotSecondAnimate_${id}`}
begin="spinner_OLMs.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="3;0"
fill="freeze"
/>
<animate
id="spinner_UHR2"
begin={`thirdDotSecondAnimate_${id}.end`}
attributeName="cx"
dur="0.001s"
values="20;4"
fill="freeze"
/>
<animate
begin="spinner_UHR2.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="0;3"
fill="freeze"
/>
<animate
begin="spinner_Aguh.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="4;12"
fill="freeze"
/>
</circle>
<circle
cx="20"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`fourthDotFirstAnimate_${id}`}
begin="0;spinner_z0Or.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="3;0"
fill="freeze"
/>
<animate
id="spinner_OLMs"
begin={`fourthDotFirstAnimate_${id}.end`}
attributeName="cx"
dur="0.001s"
values="20;4"
fill="freeze"
/>
<animate
begin="spinner_OLMs.end"
attributeName="r"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="0;3"
fill="freeze"
/>
<animate
begin="spinner_UHR2.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="4;12"
fill="freeze"
/>
<animate
begin="spinner_Aguh.end"
attributeName="cx"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1"
values="12;20"
fill="freeze"
/>
</circle>
</svg>
);
}