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:
45
lib/component/loading/spinner/HalfSpinner.tsx
Normal file
45
lib/component/loading/spinner/HalfSpinner.tsx
Normal 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
45
lib/component/loading/spinner/QuarterSpinner.tsx
Normal 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
70
lib/component/loading/spinner/RubberSpinner.tsx
Normal 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
45
lib/component/loading/spinner/ThreeQuarterSpinner.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user