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

76
lib/component/loading/dot/BouncingDots.tsx Normal file
View File

@@ -0,0 +1,76 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function BouncingDots({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-bounce.svg?short_path=50864c0
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="3"
className={className}
stroke={stroke}
>
<animate
id={`firstBouncingDots_${id}`}
begin={`0;lastBouncingDots_${id}.end+${animationDuration / 2}s`}
attributeName="cy"
calcMode="spline"
dur={animationDuration}
values="12;6;12"
keySplines=".33,.66,.66,1;.33,0,.66,.33"
/>
</circle>
<circle
cx="12"
cy="12"
r="3"
className={className}
stroke={stroke}
>
<animate
id={`secondBouncingDots_${id}`}
begin={`firstBouncingDots_${id}.begin+${animationDuration / 5}s`}
attributeName="cy"
calcMode="spline"
dur={animationDuration}
values="12;6;12"
keySplines=".33,.66,.66,1;.33,0,.66,.33"
/>
</circle>
<circle
cx="20"
cy="12"
r="3"
className={className}
stroke={stroke}
>
<animate
id={`lastBouncingDots_${id}`}
begin={`secondBouncingDots_${id}.begin+${animationDuration / 5}s`}
attributeName="cy"
calcMode="spline"
dur={animationDuration}
values="12;6;12"
keySplines=".33,.66,.66,1;.33,0,.66,.33"
/>
</circle>
</svg>
);
}

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

@@ -0,0 +1,240 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function CircleCenterDots({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale-middle.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="12"
cy="3"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle1_${id}`}
begin={`0;circle3_${id}.end-${animationDuration * 5 / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="16.50"
cy="4.21"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle2_${id}`}
begin={`circle1_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="7.50"
cy="4.21"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle3_${id}`}
begin={`circle5_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="19.79"
cy="7.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle4_${id}`}
begin={`circle2_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="4.21"
cy="7.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle5_${id}`}
begin={`circle7_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="21.00"
cy="12.00"
r="0"
className={className}
stroke={stroke}
>
<animate
id={`circle6_${id}`}
begin={`circle4_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="3.00"
cy="12.00"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle7_${id}`}
begin={`circle9_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="19.79"
cy="16.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle8_${id}`}
begin={`circle6_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="4.21"
cy="16.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle9_${id}`}
begin={`circle11_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="16.50"
cy="19.79"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle10_${id}`}
begin={`circle8_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="7.50"
cy="19.79"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle11_${id}`}
begin={`circle12_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="12"
cy="21"
r="0"
stroke={stroke}
fill={fill}
className={className}
>
<animate
id={`circle12_${id}`}
begin={`circle10_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
</svg>
);
}

94
lib/component/loading/dot/CircleFadingDots.tsx Normal file
View File

@@ -0,0 +1,94 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function CircleFadingDots({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-rotate.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<circle
cx="12"
cy="2.5"
r="1.5"
opacity=".14"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="16.75"
cy="3.77"
r="1.5"
opacity=".29"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="20.23"
cy="7.25"
r="1.5"
opacity=".43"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="21.50"
cy="12.00"
r="1.5"
opacity=".57"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="20.23"
cy="16.75"
r="1.5"
opacity=".71"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="16.75"
cy="20.23"
r="1.5"
opacity=".86"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="12"
cy="21.5"
r="1.5"
className={className}
stroke={stroke}
fill={fill}
/>
<animateTransform
attributeName="transform"
type="rotate"
calcMode="discrete"
dur={animationDuration}
values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

251
lib/component/loading/dot/CirclePulsingDots.tsx Normal file
View File

@@ -0,0 +1,251 @@
import type { CirclePulsingDotsProps } from "$/types/Loading";
export default function CirclePulsingDots({
width,
height,
className,
rotationAnimationDuration = 6,
growingAnimationDuration = 0.6,
stroke,
fill
}: CirclePulsingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/12-dots-scale-rotate.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<circle
cx="12"
cy="3"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle1_${id}`}
begin={`0;circle3_${id}.end-${growingAnimationDuration * 5 / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="16.50"
cy="4.21"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle2_${id}`}
begin={`circle1_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="7.50"
cy="4.21"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle3_${id}`}
begin={`circle5_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="19.79"
cy="7.50"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle4_${id}`}
begin={`circle2_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="4.21"
cy="7.50"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle5_${id}`}
begin={`circle7_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="21.00"
cy="12.00"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle6_${id}`}
begin={`circle4_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="3.00"
cy="12.00"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle7_${id}`}
begin={`circle9_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="19.79"
cy="16.50"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle8_${id}`}
begin={`circle6_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="4.21"
cy="16.50"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle9_${id}`}
begin={`circle11_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="16.50"
cy="19.79"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle10_${id}`}
begin={`circle8_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="7.50"
cy="19.79"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle11_${id}`}
begin={`circle12_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<circle
cx="12"
cy="21"
r="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`circle12_${id}`}
begin={`circle10_${id}.begin+${growingAnimationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={growingAnimationDuration}
values="1;2;1"
keySplines=".27,.42,.37,.99;.53,0,.61,.73"
/>
</circle>
<animateTransform
attributeName="transform"
type="rotate"
dur={rotationAnimationDuration}
values="360 12 12;0 12 12"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

97
lib/component/loading/dot/CircleRotatingDots.tsx Normal file
View File

@@ -0,0 +1,97 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function CircleRotatingDots({
width,
height,
className,
animationDuration = 1.5,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/8-dots-rotate.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<circle
cx="3"
cy="12"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="21"
cy="12"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="12"
cy="21"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="12"
cy="3"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="5.64"
cy="5.64"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="18.36"
cy="18.36"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="5.64"
cy="18.36"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="18.36"
cy="5.64"
r="2"
className={className}
stroke={stroke}
fill={fill}
/>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

264
lib/component/loading/dot/CircleShrinkingDots.tsx Normal file
View File

@@ -0,0 +1,264 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function CircleShrinkingDots({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/6-dots-scale.svg?short_path=17d1946
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="12"
cy="3"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`firstShrinkingDot_${id}`}
begin={`0;thirdShrinkingDot_${id}.end-${animationDuration * 4 / 5}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="16.50"
cy="4.21"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`secondShrinkingDot_${id}`}
begin={`firstShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="7.50"
cy="4.21"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`thirdShrinkingDot_${id}`}
begin={`fifthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="19.79"
cy="7.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`fourthShrinkingDot_${id}`}
begin={`secondShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73" fill="freeze"
/>
</circle>
<circle
cx="4.21"
cy="7.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`fifthShrinkingDot_${id}`}
begin={`seventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="21.00"
cy="12.00"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`sixthShrinkingDot_${id}`}
begin={`fourthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="3.00"
cy="12.00"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`seventhShrinkingDot_${id}`}
begin={`ninthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="19.79"
cy="16.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`eighthShrinkingDot_${id}`}
begin={`sixthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="4.21"
cy="16.50"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`ninthShrinkingDot_${id}`}
begin={`eleventhShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="16.50"
cy="19.79"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`tenthShrinkingDot_${id}`}
begin={`eighthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="7.50"
cy="19.79"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`eleventhShrinkingDot_${id}`}
begin={`twelfthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="21"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`twelfthShrinkingDot_${id}`}
begin={`tenthShrinkingDot_${id}.begin+${animationDuration / 6}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;2;0"
keyTimes="0;.2;1"
keySplines="0,1,0,1;.53,0,.61,.73"
fill="freeze"
/>
</circle>
</svg>
);
}

46
lib/component/loading/dot/CircleSpinningDot.tsx Normal file
View File

@@ -0,0 +1,46 @@
import type { CircleSpinningDotProps } from "$/types/Loading";
export default function CircleSpinningDot({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill,
trackClassName = "fill-transparent",
trackStroke,
trackFill
}: CircleSpinningDotProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/dot-revolve.svg
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,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
className={trackClassName}
stroke={trackStroke}
fill={trackFill}
/>
<circle
cx="12"
cy="2.5"
r="1.5"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</circle>
</svg>
);
}

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>
);
}

79
lib/component/loading/dot/FadingDots.tsx Normal file
View File

@@ -0,0 +1,79 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function FadingDots({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-fade.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="3"
opacity="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`firstFadingDots_${id}`}
begin={`0;lastFadingDots_${id}.end-${animationDuration / 3}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="3"
opacity=".4"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`secondFadingDots_${id}`}
begin={`firstFadingDots_${id}.begin+${animationDuration / 5}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</circle>
<circle
cx="20"
cy="12"
r="3"
opacity=".3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`lastFadingDots_${id}`}
begin={`secondFadingDots_${id}.begin+${animationDuration / 5}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</circle>
</svg>
);
}

67
lib/component/loading/dot/PulsingDots.tsx Normal file
View File

@@ -0,0 +1,67 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function PulsingDots({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale-middle.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="4"
cy="12"
r="1.5"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="r"
dur={animationDuration}
values="1.5;3;1.5"
repeatCount="indefinite"
/>
</circle>
<circle
cx="12"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="r"
dur={animationDuration}
values="3;1.5;3"
repeatCount="indefinite"
/>
</circle>
<circle
cx="20"
cy="12"
r="1.5"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="r"
dur={animationDuration}
values="1.5;3;1.5"
repeatCount="indefinite"
/>
</circle>
</svg>
);
}

56
lib/component/loading/dot/RotatingDots.tsx Normal file
View File

@@ -0,0 +1,56 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function RotatingDots({
width,
height,
className,
animationDuration = 1,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-rotate.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
/>
<g>
<circle
cx="4"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
/>
<circle
cx="20"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
/>
<animateTransform
attributeName="transform"
type="rotate"
calcMode="spline"
dur={animationDuration}
keySplines=".36,.6,.31,1;.36,.6,.31,1"
values="0 12 12;180 12 12;360 12 12"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

72
lib/component/loading/dot/SwellingDots.tsx Normal file
View File

@@ -0,0 +1,72 @@
import type { LoadingDotsProps } from "$/types/Loading";
export default function SwellingDots({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingDotsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/3-dots-scale.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="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`firstDot_${id}`}
begin={`0;lastDot_${id}.end-${animationDuration / 3}s`}
attributeName="r"
dur={animationDuration}
values="3;.2;3"
/>
</circle>
<circle
cx="12"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`firstDot_${id}.end-${animationDuration * 4 / 5}s`}
attributeName="r"
dur={animationDuration}
values="3;.2;3"
/>
</circle>
<circle
cx="20"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`lastDot_${id}`}
begin={`firstDot_${id}.end-${animationDuration * 2 / 3}s`}
attributeName="r"
dur={animationDuration}
values="3;.2;3"
/>
</circle>
</svg>
);
}