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

157
lib/component/loading/bar/CenterGrowingBars.tsx Normal file
View File

@@ -0,0 +1,157 @@
import type { LoadingBarsProps } from "$/types/Loading";
export default function CenterGrowingBars({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingBarsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-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"
>
<rect
x="1"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
<animate
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
</rect>
<rect
x="5.8"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
<animate
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
</rect>
<rect
x="10.6"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle3_${id}`}
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
<animate
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
</rect>
<rect
x="15.4"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
<animate
begin={`rectangle3_${id}.begin+${animationDuration / 3}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
</rect>
<rect
x="20.2"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle5_${id}`}
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
<animate
begin={`rectangle3_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".14,.73,.34,1;.65,.26,.82,.45"
/>
</rect>
</svg>
);
}

109
lib/component/loading/bar/CircleBars.tsx Normal file
View File

@@ -0,0 +1,109 @@
import type { LoadingBarsProps } from "$/types/Loading";
export default function CircleBars({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingBarsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-rotate-fade.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<rect
x="11"
y="1"
width="2"
height="5"
opacity=".14"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="1"
width="2"
height="5"
transform="rotate(30 12 12)"
opacity=".29"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="1"
width="2"
height="5"
transform="rotate(60 12 12)"
opacity=".43"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="1"
width="2"
height="5"
transform="rotate(90 12 12)"
opacity=".57"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="1"
width="2"
height="5"
transform="rotate(120 12 12)"
opacity=".71"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="1"
width="2"
height="5"
transform="rotate(150 12 12)"
opacity=".86"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="1"
width="2"
height="5"
transform="rotate(180 12 12)"
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"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

81
lib/component/loading/bar/FadingBars.tsx Normal file
View File

@@ -0,0 +1,81 @@
import type { LoadingBarsProps } from "$/types/Loading";
export default function FadingBars({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingBarsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-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"
>
<rect
x="1"
y="4"
width="6"
height="14"
opacity="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle1_${id}`}
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</rect>
<rect
x="9"
y="4"
width="6"
height="14"
opacity=".4"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</rect>
<rect
x="17"
y="4"
width="6"
height="14"
opacity=".3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle3_${id}`}
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</rect>
</svg>
);
}

123
lib/component/loading/bar/FadingGrowingBars.tsx Normal file
View File

@@ -0,0 +1,123 @@
import type { LoadingBarsProps } from "$/types/Loading";
export default function FadingGrowingBars({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingBarsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-scale-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"
>
<rect
x="1"
y="4"
width="6"
height="14"
opacity="1"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle1_${id}`}
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
attributeName="y"
dur={animationDuration}
values="1;5"
fill="freeze"
/>
<animate
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
attributeName="height"
dur={animationDuration}
values="22;14"
fill="freeze"
/>
<animate
begin={`0;rectangle3_${id}.end-${animationDuration / 3}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</rect>
<rect
x="9"
y="4"
width="6"
height="14"
opacity=".4"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
attributeName="y"
dur={animationDuration}
values="1;5"
fill="freeze"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
attributeName="height"
dur={animationDuration}
values="22;14"
fill="freeze"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 5}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</rect>
<rect
x="17"
y="4"
width="6"
height="14"
opacity=".3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle3_${id}`}
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
attributeName="y"
dur={animationDuration}
values="1;5"
fill="freeze"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
attributeName="height"
dur={animationDuration}
values="22;14"
fill="freeze"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 5}s`}
attributeName="opacity"
dur={animationDuration}
values="1;.2"
fill="freeze"
/>
</rect>
</svg>
);
}

157
lib/component/loading/bar/GrowingBars.tsx Normal file
View File

@@ -0,0 +1,157 @@
import type { LoadingBarsProps } from "$/types/Loading";
export default function GrowingBars({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingBarsProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bars-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"
>
<rect
x="1"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle1_${id}`}
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
<animate
begin={`0;rectangle5_${id}.end-${animationDuration / 6}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
</rect>
<rect
x="5.8"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 6}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 6}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
</rect>
<rect
x="10.6"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 3}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 3}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
</rect>
<rect
x="15.4"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
</rect>
<rect
x="20.2"
y="6"
width="2.8"
height="12"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle5_${id}`}
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="y"
calcMode="spline"
dur={animationDuration}
values="6;1;6"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="height"
calcMode="spline"
dur={animationDuration}
values="12;22;12"
keySplines=".36,.61,.3,.98;.36,.61,.3,.98"
/>
</rect>
</svg>
);
}

183
lib/component/loading/block/PulsingBlocks.tsx Normal file
View File

@@ -0,0 +1,183 @@
import type { LoadingBlocksProps } from "$/types/Loading";
export default function PulsingBlocks({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingBlocksProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-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"
>
<rect
x="1.5"
y="1.5"
rx="1"
width="9"
height="9"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle1_${id}`}
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
attributeName="x"
dur={animationDuration}
values="1.5;.5;1.5"
keyTimes="0;.2;1"
/>
<animate
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
attributeName="y"
dur={animationDuration}
values="1.5;.5;1.5"
keyTimes="0;.2;1"
/>
<animate
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
attributeName="width"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
<animate
begin={`0;rectangle4_${id}.end+${animationDuration / 4}s`}
attributeName="height"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
</rect>
<rect
x="13.5"
y="1.5"
rx="1"
width="9"
height="9"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
attributeName="x"
dur={animationDuration}
values="13.5;12.5;13.5"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
attributeName="y"
dur={animationDuration}
values="1.5;.5;1.5"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
attributeName="width"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 4}s`}
attributeName="height"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
</rect>
<rect
x="13.5"
y="13.5"
rx="1"
width="9"
height="9"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
attributeName="x"
dur={animationDuration}
values="13.5;12.5;13.5"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
attributeName="y"
dur={animationDuration}
values="13.5;12.5;13.5"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
attributeName="width"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration / 2}s`}
attributeName="height"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
</rect>
<rect
x="1.5"
y="13.5"
rx="1"
width="9"
height="9"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle4_${id}`}
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
attributeName="x"
dur={animationDuration}
values="1.5;.5;1.5"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
attributeName="y"
dur={animationDuration}
values="13.5;12.5;13.5"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
attributeName="width"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
<animate
begin={`rectangle1_${id}.begin+${animationDuration * 3 / 4}s`}
attributeName="height"
dur={animationDuration}
values="9;11;9"
keyTimes="0;.2;1"
/>
</rect>
</svg>
);
}

111
lib/component/loading/block/SlidingBlocks2.tsx Normal file
View File

@@ -0,0 +1,111 @@
import type { LoadingBlocksProps } from "$/types/Loading";
export default function SlidingBlocks2({
width,
height,
className,
animationDuration = 0.2,
stroke,
fill
}: LoadingBlocksProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-2.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
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={stroke}
fill={fill}
>
<animate
id={`rectangle1_1_${id}`}
begin={`0;rectangle2_4_${id}.end`}
attributeName="x"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle1_2_${id}`}
begin={`rectangle2_1_${id}.end`}
attributeName="y"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle1_3_${id}`}
begin={`rectangle2_2_${id}.end`}
attributeName="x"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
<animate
id={`rectangle1_4_${id}`}
begin={`rectangle2_3_${id}.end`}
attributeName="y"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
</rect>
<rect
x="1"
y="13"
rx="1"
width="10"
height="10"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle2_1_${id}`}
begin={`rectangle1_1_${id}.end`}
attributeName="y"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
<animate
id={`rectangle2_2_${id}`}
begin={`rectangle1_2_${id}.end`}
attributeName="x"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle2_3_${id}`}
begin={`rectangle1_3_${id}.end`}
attributeName="y"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle2_4_${id}`}
begin={`rectangle1_4_${id}.end`}
attributeName="x"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
</rect>
</svg>
);
}

154
lib/component/loading/block/SlidingBlocks3.tsx Normal file
View File

@@ -0,0 +1,154 @@
import type { LoadingBlocksProps } from "$/types/Loading";
export default function SlidingBlocks3({
width,
height,
className,
animationDuration = 0.2,
stroke,
fill
}: LoadingBlocksProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-shuffle-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"
>
<rect
x="1"
y="1"
rx="1"
width="10"
height="10"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle1_1_${id}`}
begin={`0;rectangle3_4_${id}.end`}
attributeName="x"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle1_2_${id}`}
begin={`rectangle3_1_${id}.end`}
attributeName="y"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle1_3_${id}`}
begin={`rectangle3_2_${id}.end`}
attributeName="x"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
<animate
id={`rectangle1_4_${id}`}
begin={`rectangle3_3_${id}.end`}
attributeName="y"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
</rect>
<rect
x="1"
y="13"
rx="1"
width="10"
height="10"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle2_1_${id}`}
begin={`rectangle1_1_${id}.end`}
attributeName="y"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
<animate
id={`rectangle2_2_${id}`}
begin={`rectangle1_2_${id}.end`}
attributeName="x"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle2_3_${id}`}
begin={`rectangle1_3_${id}.end`}
attributeName="y"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle2_4_${id}`}
begin={`rectangle1_4_${id}.end`}
attributeName="x"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
</rect>
<rect
x="13"
y="13"
rx="1"
width="10"
height="10"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle3_1_${id}`}
begin={`rectangle2_1_${id}.end`}
attributeName="x"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
<animate
id={`rectangle3_2_${id}`}
begin={`rectangle2_2_${id}.end`}
attributeName="y"
dur={animationDuration}
values="13;1"
fill="freeze"
/>
<animate
id={`rectangle3_3_${id}`}
begin={`rectangle2_3_${id}.end`}
attributeName="x"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
<animate
id={`rectangle3_4_${id}`}
begin={`rectangle2_4_${id}.end`}
attributeName="y"
dur={animationDuration}
values="1;13"
fill="freeze"
/>
</rect>
</svg>
);
}

333
lib/component/loading/block/WaveBlocks.tsx Normal file
View File

@@ -0,0 +1,333 @@
import type { LoadingBlocksProps } from "$/types/Loading";
export default function WaveBlocks({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingBlocksProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/blocks-wave.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1"
y="1"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle1_1_${id}`}
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
attributeName="x"
dur={animationDuration}
values="1;4;1"
/>
<animate
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
attributeName="y"
dur={animationDuration}
values="1;4;1"
/>
<animate
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`0;rectangle9_1_${id}.end+${animationDuration / 3}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="8.33"
y="1"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="x"
dur={animationDuration}
values="8.33;11.33;8.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="y"
dur={animationDuration}
values="1;4;1"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="1"
y="8.33"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="x"
dur={animationDuration}
values="1;4;1"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="y"
dur={animationDuration}
values="8.33;11.33;8.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 6}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="15.66"
y="1"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="x"
dur={animationDuration}
values="15.66;18.66;15.66"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="y"
dur={animationDuration}
values="1;4;1"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="8.33"
y="8.33"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="x"
dur={animationDuration}
values="8.33;11.33;8.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="y"
dur={animationDuration}
values="8.33;11.33;8.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="1"
y="15.66"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="x"
dur={animationDuration}
values="1;4;1"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="y"
dur={animationDuration}
values="15.66;18.66;15.66"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 3}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="15.66"
y="8.33"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="x"
dur={animationDuration}
values="15.66;18.66;15.66"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="y"
dur={animationDuration}
values="8.33;11.33;8.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="8.33"
y="15.66"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="x"
dur={animationDuration}
values="8.33;11.33;8.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="y"
dur={animationDuration}
values="15.66;18.66;15.66"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration / 2}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
<rect
x="15.66"
y="15.66"
width="7.33"
height="7.33"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`rectangle9_1_${id}`}
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="x"
dur={animationDuration}
values="15.66;18.66;15.66"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="y"
dur={animationDuration}
values="15.66;18.66;15.66"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="width"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
<animate
begin={`rectangle1_1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="height"
dur={animationDuration}
values="7.33;1.33;7.33"
/>
</rect>
</svg>
);
}

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

81
lib/component/loading/drop/DoubleDrop.tsx Normal file
View File

@@ -0,0 +1,81 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function DoubleDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-2.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="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop1_${id}`}
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop2_${id}`}
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration / 2}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
</svg>
);
}

97
lib/component/loading/drop/DoubleWaveDrop.tsx Normal file
View File

@@ -0,0 +1,97 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function DoubleWaveDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-2.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;drop2_${id}.begin+${animationDuration / 2}s`}
attributeName="transform"
calcMode="spline"
type="translate"
dur={animationDuration}
values="12 12;0 0"
keySplines=".52,.6,.25,.99"
/>
<animateTransform
begin={`0;drop2_${id}.begin+${animationDuration / 2}s`}
attributeName="transform"
calcMode="spline"
additive="sum"
type="scale"
dur={animationDuration}
values="0;1"
keySplines=".52,.6,.25,.99"
/>
<animate
begin={`0;drop2_${id}.begin+${animationDuration / 2}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 / 2}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}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}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
/>
</path>
</svg>
);
}

49
lib/component/loading/drop/Drop.tsx Normal file
View File

@@ -0,0 +1,49 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function Drop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse.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="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
repeatCount="indefinite"
/>
</circle>
</svg>
);
}

109
lib/component/loading/drop/QuickDrop.tsx Normal file
View File

@@ -0,0 +1,109 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function QuickDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-multiple.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="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop1_${id}`}
begin={`0;drop3_${id}.end`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`0;drop3_${id}.end`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop2_${id}`}
begin={`drop1_${id}.begin+${animationDuration / 6}`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration / 6}`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop3_${id}`}
begin={`drop1_${id}.begin+${animationDuration / 3}`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration / 3}`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
</svg>
);
}

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

@@ -0,0 +1,133 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function QuickWaveDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-rings-multiple.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}.end`}
attributeName="transform"
calcMode="spline"
type="translate"
dur={animationDuration}
values="12 12;0 0"
keySplines=".52,.6,.25,.99"
/>
<animateTransform
begin={`0;drop3_${id}.end`}
attributeName="transform"
calcMode="spline"
additive="sum"
type="scale"
dur={animationDuration}
values="0;1"
keySplines=".52,.6,.25,.99"
/>
<animate
begin={`0;drop3_${id}.end`}
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 / 6}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 / 6}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 / 6}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 / 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>
</svg>
);
}

109
lib/component/loading/drop/TripleDrop.tsx Normal file
View File

@@ -0,0 +1,109 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function TripleDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-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"
>
<circle
cx="12"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop1_${id}`}
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`0;drop3_${id}.begin+${animationDuration / 3}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop2_${id}`}
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration / 3}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
<circle
cx="12"
cy="12"
r="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`drop3_${id}`}
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="0;11"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
<animate
begin={`drop1_${id}.begin+${animationDuration * 2 / 3}s`}
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
fill="freeze"
/>
</circle>
</svg>
);
}

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

59
lib/component/loading/drop/WaveDrop.tsx Normal file
View File

@@ -0,0 +1,59 @@
import type { LoadingPulseProps } from "$/types/Loading";
export default function WaveDrop({
width,
height,
className,
animationDuration = 1.2,
stroke,
fill
}: LoadingPulseProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/pulse-ring.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,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
attributeName="transform"
calcMode="spline"
type="translate"
dur={animationDuration}
values="12 12;0 0"
keySplines=".52,.6,.25,.99"
repeatCount="indefinite"
/>
<animateTransform
attributeName="transform"
calcMode="spline"
additive="sum"
type="scale"
dur={animationDuration}
values="0;1"
keySplines=".52,.6,.25,.99"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
calcMode="spline"
dur={animationDuration}
values="1;0"
keySplines=".52,.6,.25,.99"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

45
lib/component/loading/spinner/HalfSpinner.tsx Normal file
View File

@@ -0,0 +1,45 @@
import type { LoadingSpinnerProps } from "$/types/Loading";
export default function HalfSpinner({
width,
height,
animationDuration = 1,
className,
stroke,
fill,
trackClassName = "fill-transparent",
trackStroke,
trackFill
}: LoadingSpinnerProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/180-ring-with-bg.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}
/>
<path
d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

45
lib/component/loading/spinner/QuarterSpinner.tsx Normal file
View File

@@ -0,0 +1,45 @@
import type { LoadingSpinnerProps } from "$/types/Loading";
export default function QuarterSpinner({
width,
height,
animationDuration = 1,
className,
stroke,
fill,
trackClassName = "fill-transparent",
trackStroke,
trackFill
}: LoadingSpinnerProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/90-ring-with-bg.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}
/>
<path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

70
lib/component/loading/spinner/RubberSpinner.tsx Normal file
View File

@@ -0,0 +1,70 @@
import type { RubberLoadingSpinnerProps } from "$/types/Loading";
export default function RubberSpinner({
width,
height,
animationDuration = 2,
stretchDuration = 1.5,
className,
stroke,
fill = "none",
trackClassName = "fill-transparent",
trackStroke,
trackFill
}: RubberLoadingSpinnerProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/ring-resize.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}
/>
<g>
<circle
cx="12"
cy="12"
r="9.5"
className={className}
stroke={stroke}
fill={fill}
stroke-width="3"
stroke-linecap="round"
>
<animate
attributeName="stroke-dasharray"
dur={stretchDuration}
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={stretchDuration}
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={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

45
lib/component/loading/spinner/ThreeQuarterSpinner.tsx Normal file
View File

@@ -0,0 +1,45 @@
import type { LoadingSpinnerProps } from "$/types/Loading";
export default function ThreeQuarterSpinner({
width,
height,
animationDuration = 1,
className,
stroke,
fill,
trackClassName = "fill-transparent",
trackStroke,
trackFill
}: LoadingSpinnerProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/270-ring-with-bg.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}
/>
<path
d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

79
lib/component/loading/various/BouncingDot.tsx Normal file
View File

@@ -0,0 +1,79 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function BouncingDot({
width,
height,
className,
animationDuration = 0.9,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/bouncing-ball.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
cx="12"
cy="5"
rx="4"
ry="4"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`dot1_1_${id}`}
begin={`0;dot1_5_${id}.end`}
attributeName="cy"
calcMode="spline"
dur={animationDuration * 5 / 12}
values="5;20"
keySplines=".33,0,.66,.33"
fill="freeze"
/>
<animate
begin={`dot1_1_${id}.end`}
attributeName="rx"
calcMode="spline"
dur={animationDuration / 18}
values="4;4.8;4"
keySplines=".33,0,.66,.33;.33,.66,.66,1"
/>
<animate
begin={`dot1_1_${id}.end`}
attributeName="ry"
calcMode="spline"
dur={animationDuration / 18}
values="4;3;4"
keySplines=".33,0,.66,.33;.33,.66,.66,1"
/>
<animate
id={`dot1_4_${id}`}
begin={`dot1_1_${id}.end`}
attributeName="cy"
calcMode="spline"
dur={animationDuration / 36}
values="20;20.5"
keySplines=".33,0,.66,.33"
/>
<animate
id={`dot1_5_${id}`}
begin={`dot1_4_${id}.end`}
attributeName="cy"
calcMode="spline"
dur={animationDuration * 4 / 9}
values="20.5;5"
keySplines=".33,.66,.66,1"
/>
</ellipse>
</svg>
);
}

95
lib/component/loading/various/PulsingLine.tsx Normal file
View File

@@ -0,0 +1,95 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function PulsingLine({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/gooey-balls-1.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter id="spinner-gF00">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="1.5"
result="y"
/>
<feColorMatrix
in="y"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="z"
/>
<feBlend
in="SourceGraphic"
in2="z"
/>
</filter>
</defs>
<g filter="url(#spinner-gF00)">
<circle
cx="4"
cy="12"
r="3"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="cx"
calcMode="spline"
dur={animationDuration}
values="4;9;4"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
/>
<animate
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="3;8;3"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
/>
</circle>
<circle
cx="15"
cy="12"
r="8"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="cx"
calcMode="spline"
dur={animationDuration}
values="15;20;15"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
/>
<animate
attributeName="r"
calcMode="spline"
dur={animationDuration}
values="8;3;8"
keySplines=".56,.52,.17,.98;.56,.52,.17,.98"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
);
}

91
lib/component/loading/various/SpinningBinary.tsx Normal file
View File

@@ -0,0 +1,91 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function SpinningBinary({
width,
height,
className,
animationDuration = 2,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/gooey-balls-2.svg
const id = crypto.randomUUID().replaceAll("-", "");
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<filter
id={`spinningBinaryFilter_${id}`}
>
<feGaussianBlur
in="SourceGraphic"
stdDeviation="1"
result="y"
/>
<feColorMatrix
in="y"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="z"
/>
<feBlend
in="SourceGraphic"
in2="z"
/>
</filter>
</defs>
<g
filter={`url(#spinningBinaryFilter_${id})`}
>
<circle
cx="5"
cy="12"
r="4"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="cx"
calcMode="spline"
dur={animationDuration}
values="5;8;5"
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite"
/>
</circle>
<circle
cx="19"
cy="12"
r="4"
className={className}
stroke={stroke}
fill={fill}
>
<animate
attributeName="cx"
calcMode="spline"
dur={animationDuration}
values="19;16;19"
keySplines=".36,.62,.43,.99;.79,0,.58,.57"
repeatCount="indefinite"
/>
</circle>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration * 3 / 8}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</g>
</svg>
);
}

64
lib/component/loading/various/SpinningClock.tsx Normal file
View File

@@ -0,0 +1,64 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function SpinningClock({
width,
height,
className,
animationDuration = 9,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/clock.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,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
className={className}
stroke={stroke}
fill={fill}
/>
<rect
x="11"
y="4"
rx="1"
width="2"
height="9"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration / 12}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</rect>
<rect
x="11"
y="11"
rx="1"
width="2"
height="7"
className={className}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</rect>
</svg>
);
}

38
lib/component/loading/various/SpinningEclipse.tsx Normal file
View File

@@ -0,0 +1,38 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function SpinningEclipse({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/eclipse.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

38
lib/component/loading/various/SpinningEclipseHalf.tsx Normal file
View File

@@ -0,0 +1,38 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function SpinningEclipseHalf({
width,
height,
className,
animationDuration = 0.6,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/eclipse-half.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2,12A10.94,10.94,0,0,1,5,4.65c-.21-.19-.42-.36-.62-.55h0A11,11,0,0,0,12,23c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

38
lib/component/loading/various/SpinningGalaxy.tsx Normal file
View File

@@ -0,0 +1,38 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function SpinningGalaxy({
width,
height,
className,
animationDuration = 1.5,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wind-toy.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.27,4.74a4.93,4.93,0,0,1,1.52,4.61,5.32,5.32,0,0,1-4.1,4.51,5.12,5.12,0,0,1-5.2-1.5,5.53,5.53,0,0,0,6.13-1.48A5.66,5.66,0,0,0,20.27,4.74ZM12.32,11.53a5.49,5.49,0,0,0-1.47-6.2A5.57,5.57,0,0,0,4.71,3.72,5.17,5.17,0,0,1,9.53,2.2,5.52,5.52,0,0,1,13.9,6.45,5.28,5.28,0,0,1,12.32,11.53ZM19.2,20.29a4.92,4.92,0,0,1-4.72,1.49,5.32,5.32,0,0,1-4.34-4.05A5.2,5.2,0,0,1,11.6,12.5a5.6,5.6,0,0,0,1.51,6.13A5.63,5.63,0,0,0,19.2,20.29ZM3.79,19.38A5.18,5.18,0,0,1,2.32,14a5.3,5.3,0,0,1,4.59-4,5,5,0,0,1,4.58,1.61,5.55,5.55,0,0,0-6.32,1.69A5.46,5.46,0,0,0,3.79,19.38ZM12.23,12a5.11,5.11,0,0,0,3.66-5,5.75,5.75,0,0,0-3.18-6,5,5,0,0,1,4.42,2.3,5.21,5.21,0,0,1,.24,5.92A5.4,5.4,0,0,1,12.23,12ZM11.76,12a5.18,5.18,0,0,0-3.68,5.09,5.58,5.58,0,0,0,3.19,5.79c-1,.35-2.9-.46-4-1.68A5.51,5.51,0,0,1,11.76,12ZM23,12.63a5.07,5.07,0,0,1-2.35,4.52,5.23,5.23,0,0,1-5.91.2,5.24,5.24,0,0,1-2.67-4.77,5.51,5.51,0,0,0,5.45,3.33A5.52,5.52,0,0,0,23,12.63ZM1,11.23a5,5,0,0,1,2.49-4.5,5.23,5.23,0,0,1,5.81-.06,5.3,5.3,0,0,1,2.61,4.74A5.56,5.56,0,0,0,6.56,8.06,5.71,5.71,0,0,0,1,11.23Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

38
lib/component/loading/various/SpinningTadpole.tsx Normal file
View File

@@ -0,0 +1,38 @@
import type { LoadingVariousProps } from "$/types/Loading";
export default function SpinningTadpole({
width,
height,
className,
animationDuration = 0.75,
stroke,
fill
}: LoadingVariousProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/tadpole.svg
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12,23a9.63,9.63,0,0,1-8-9.5,9.51,9.51,0,0,1,6.79-9.1A1.66,1.66,0,0,0,12,2.81h0a1.67,1.67,0,0,0-1.94-1.64A11,11,0,0,0,12,23Z"
className={className}
stroke={stroke}
fill={fill}
>
<animateTransform
attributeName="transform"
type="rotate"
dur={animationDuration}
values="0 12 12;360 12 12"
repeatCount="indefinite"
/>
</path>
</svg>
);
}

99
lib/component/loading/various/Wifi.tsx Normal file
View File

@@ -0,0 +1,99 @@
import type { LoadingWifiProps } from "$/types/Loading";
export default function Wifi({
width,
height,
className,
animationDuration = 0.25,
fadeDuration = 0.001,
stroke,
fill
}: LoadingWifiProps){
//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wifi.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,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21"
opacity="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`segment1_1_${id}`}
begin={`0;segment1_2_${id}.end+0.2s`}
attributeName="opacity"
calcMode="discrete"
dur={animationDuration}
values="0;1"
fill="freeze"
/>
<animate
id={`segment1_2_${id}`}
begin={`segment3_1_${id}.end+0.5s`}
attributeName="opacity"
dur={fadeDuration}
values="1;0"
fill="freeze"
/>
</path>
<path
d="M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z"
opacity="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`segment2_1_${id}`}
begin={`segment1_1_${id}.end`}
attributeName="opacity"
calcMode="discrete"
dur={animationDuration}
values="0;1"
fill="freeze"
/>
<animate
begin={`segment3_1_${id}.end+0.5s`}
attributeName="opacity"
dur={fadeDuration}
values="1;0"
fill="freeze"
/>
</path>
<path
d="M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3"
opacity="0"
className={className}
stroke={stroke}
fill={fill}
>
<animate
id={`segment3_1_${id}`}
begin={`segment2_1_${id}.end`}
attributeName="opacity"
calcMode="discrete"
dur={animationDuration}
values="0;1"
fill="freeze"
/>
<animate
begin={`segment3_1_${id}.end+0.5s`}
attributeName="opacity"
dur={fadeDuration}
values="1;0"
fill="freeze"
/>
</path>
</svg>
);
}