mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 21:53:57 -05:00
Most simple components created
This commit is contained in:
79
lib/component/loading/various/BouncingDot.tsx
Normal file
79
lib/component/loading/various/BouncingDot.tsx
Normal 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
95
lib/component/loading/various/PulsingLine.tsx
Normal 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
91
lib/component/loading/various/SpinningBinary.tsx
Normal 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
64
lib/component/loading/various/SpinningClock.tsx
Normal 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
38
lib/component/loading/various/SpinningEclipse.tsx
Normal 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
38
lib/component/loading/various/SpinningEclipseHalf.tsx
Normal 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
38
lib/component/loading/various/SpinningGalaxy.tsx
Normal 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
38
lib/component/loading/various/SpinningTadpole.tsx
Normal 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
99
lib/component/loading/various/Wifi.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user