BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 13:43:59 -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

133
lib/component/loading/drop/TripleWaveDrop.tsx Normal file
View File

@@ -0,0 +1,133 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function TripleWaveDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-3.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
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,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
transform="translate(12, 12) scale(0)"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
id={`drop1_${id}`}
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
attributeName="transform"
calcMode="spline"
type="translate"
dur={animationDuration}
values="12 12;0 0"
keySplines=".52,.6,.25,.99"
/>
<animateTransform
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
attributeName="transform"
calcMode="spline"
additive="sum"
type="scale"
dur={animationDuration}
values="0;1"
keySplines=".52,.6,.25,.99"
/>
<animate
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
/>
</path>
<path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
transform="translate(12, 12) scale(0)"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
id={`drop2_${id}`}
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
attributeName="transform"
calcMode="spline"
type="translate"
dur={animationDuration}
values="12 12;0 0"
keySplines=".52,.6,.25,.99"
/>
<animateTransform
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
attributeName="transform"
calcMode="spline"
additive="sum"
type="scale"
dur={animationDuration}
values="0;1"
keySplines=".52,.6,.25,.99"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
/>
</path>
<path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
transform="translate(12, 12) scale(0)"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
id={`drop3_${id}`}
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="transform"
calcMode="spline"
type="translate"
dur={animationDuration}
values="12 12;0 0"
keySplines=".52,.6,.25,.99"
/>
<animateTransform
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="transform"
calcMode="spline"
additive="sum"
type="scale"
dur={animationDuration}
values="0;1"
keySplines=".52,.6,.25,.99"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
/>
</path>
</svg>
);
}