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:
490
src/util/LoadingUtils.tsx
Normal file
490
src/util/LoadingUtils.tsx
Normal file
@@ -0,0 +1,490 @@
|
||||
import CenterGrowingBars from "$/component/loading/bar/CenterGrowingBars";
|
||||
import CircleBars from "$/component/loading/bar/CircleBars";
|
||||
import FadingBars from "$/component/loading/bar/FadingBars";
|
||||
import FadingGrowingBars from "$/component/loading/bar/FadingGrowingBars";
|
||||
import GrowingBars from "$/component/loading/bar/GrowingBars";
|
||||
import PulsingBlocks from "$/component/loading/block/PulsingBlocks";
|
||||
import SlidingBlocks2 from "$/component/loading/block/SlidingBlocks2";
|
||||
import SlidingBlocks3 from "$/component/loading/block/SlidingBlocks3";
|
||||
import WaveBlocks from "$/component/loading/block/WaveBlocks";
|
||||
import BouncingDots from "$/component/loading/dot/BouncingDots";
|
||||
import CircleCenterDots from "$/component/loading/dot/CircleCenterDots";
|
||||
import CircleFadingDots from "$/component/loading/dot/CircleFadingDots";
|
||||
import CirclePulsingDots from "$/component/loading/dot/CirclePulsingDots";
|
||||
import CircleRotatingDots from "$/component/loading/dot/CircleRotatingDots";
|
||||
import CircleShrinkingDots from "$/component/loading/dot/CircleShrinkingDots";
|
||||
import CircleSpinningDot from "$/component/loading/dot/CircleSpinningDot";
|
||||
import CyclingDots from "$/component/loading/dot/CyclingDots";
|
||||
import FadingDots from "$/component/loading/dot/FadingDots";
|
||||
import PulsingDots from "$/component/loading/dot/PulsingDots";
|
||||
import RotatingDots from "$/component/loading/dot/RotatingDots";
|
||||
import SwellingDots from "$/component/loading/dot/SwellingDots";
|
||||
import DoubleDrop from "$/component/loading/drop/DoubleDrop";
|
||||
import DoubleWaveDrop from "$/component/loading/drop/DoubleWaveDrop";
|
||||
import Drop from "$/component/loading/drop/Drop";
|
||||
import QuickDrop from "$/component/loading/drop/QuickDrop";
|
||||
import QuickWaveDrop from "$/component/loading/drop/QuickWaveDrop";
|
||||
import TripleDrop from "$/component/loading/drop/TripleDrop";
|
||||
import TripleWaveDrop from "$/component/loading/drop/TripleWaveDrop";
|
||||
import WaveDrop from "$/component/loading/drop/WaveDrop";
|
||||
import HalfSpinner from "$/component/loading/spinner/HalfSpinner";
|
||||
import QuarterSpinner from "$/component/loading/spinner/QuarterSpinner";
|
||||
import RubberSpinner from "$/component/loading/spinner/RubberSpinner";
|
||||
import ThreeQuarterSpinner from "$/component/loading/spinner/ThreeQuarterSpinner";
|
||||
import BouncingDot from "$/component/loading/various/BouncingDot";
|
||||
import PulsingLine from "$/component/loading/various/PulsingLine";
|
||||
import SpinningBinary from "$/component/loading/various/SpinningBinary";
|
||||
import SpinningClock from "$/component/loading/various/SpinningClock";
|
||||
import SpinningEclipse from "$/component/loading/various/SpinningEclipse";
|
||||
import SpinningEclipseHalf from "$/component/loading/various/SpinningEclipseHalf";
|
||||
import SpinningGalaxy from "$/component/loading/various/SpinningGalaxy";
|
||||
import SpinningTadpole from "$/component/loading/various/SpinningTadpole";
|
||||
import Wifi from "$/component/loading/various/Wifi";
|
||||
import type { JSX } from "react";
|
||||
|
||||
|
||||
function LoadingGroup({
|
||||
label,
|
||||
elements
|
||||
}:{
|
||||
label: React.ReactNode;
|
||||
elements: JSX.Element[];
|
||||
}){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
>
|
||||
<h1
|
||||
className="text-2xl"
|
||||
>
|
||||
{label}
|
||||
</h1>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-x-8"
|
||||
>
|
||||
{
|
||||
elements.map((spinner, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-32 h-32"
|
||||
>
|
||||
{spinner}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export function generateSpinnersContent(){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-y-16"
|
||||
>
|
||||
<LoadingGroup
|
||||
label="Quarter Spinner"
|
||||
elements={[
|
||||
<QuarterSpinner
|
||||
className="fill-blue-600"
|
||||
/>,
|
||||
<QuarterSpinner
|
||||
trackClassName="fill-neutral-700 dark:fill-zinc-700"
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Half Spinner"
|
||||
elements={[
|
||||
<HalfSpinner
|
||||
className="fill-blue-600"
|
||||
/>,
|
||||
<HalfSpinner
|
||||
trackClassName="fill-neutral-700 dark:fill-zinc-700"
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Three-Quarter Spinner"
|
||||
elements={[
|
||||
<ThreeQuarterSpinner
|
||||
className="fill-blue-600"
|
||||
/>,
|
||||
<ThreeQuarterSpinner
|
||||
trackClassName="fill-neutral-700 dark:fill-zinc-700"
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Rubber Spinner"
|
||||
elements={[
|
||||
<RubberSpinner
|
||||
stroke="#155dfc"
|
||||
/>,
|
||||
<RubberSpinner
|
||||
trackClassName="fill-neutral-700 dark:fill-zinc-700"
|
||||
stroke="#155dfc"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function generateDotsContent(){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
>
|
||||
<LoadingGroup
|
||||
label="Bouncing"
|
||||
elements={[
|
||||
<BouncingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Fading"
|
||||
elements={[
|
||||
<FadingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Cycling"
|
||||
elements={[
|
||||
<CyclingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Rotating"
|
||||
elements={[
|
||||
<RotatingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Swelling"
|
||||
elements={[
|
||||
<SwellingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Pulsing"
|
||||
elements={[
|
||||
<PulsingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Fading"
|
||||
elements={[
|
||||
<CircleFadingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Shrinking"
|
||||
elements={[
|
||||
<CircleShrinkingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Center"
|
||||
elements={[
|
||||
<CircleCenterDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Rotating"
|
||||
elements={[
|
||||
<CircleRotatingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Pulsing"
|
||||
elements={[
|
||||
<CirclePulsingDots
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Spinning"
|
||||
elements={[
|
||||
<CircleSpinningDot
|
||||
trackClassName="fill-neutral-700 dark:fill-zinc-700"
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function generateBarsContent(){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
>
|
||||
<LoadingGroup
|
||||
label="Fading Bars"
|
||||
elements={[
|
||||
<FadingBars
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Growing Bars"
|
||||
elements={[
|
||||
<GrowingBars
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Fading Growing Bars"
|
||||
elements={[
|
||||
<FadingGrowingBars
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Center Growing Bars"
|
||||
elements={[
|
||||
<CenterGrowingBars
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Circle Bars"
|
||||
elements={[
|
||||
<CircleBars
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function generateBlocksContent(){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
>
|
||||
<LoadingGroup
|
||||
label="Pulsing Blocks"
|
||||
elements={[
|
||||
<PulsingBlocks
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Sliding Blocks 2"
|
||||
elements={[
|
||||
<SlidingBlocks2
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Sliding Blocks 3"
|
||||
elements={[
|
||||
<SlidingBlocks3
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Wave Blocks"
|
||||
elements={[
|
||||
<WaveBlocks
|
||||
className="fill-blue-600 stroke-0 stroke-black"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function generatePulsesContent(){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
>
|
||||
<LoadingGroup
|
||||
label="Drop"
|
||||
elements={[
|
||||
<Drop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Double Drop"
|
||||
elements={[
|
||||
<DoubleDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Triple Drop"
|
||||
elements={[
|
||||
<TripleDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Quick Drop"
|
||||
elements={[
|
||||
<QuickDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Wave Drop"
|
||||
elements={[
|
||||
<WaveDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Double Wave Drop"
|
||||
elements={[
|
||||
<DoubleWaveDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Triple Wave Drop"
|
||||
elements={[
|
||||
<TripleWaveDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Quick Wave Drop"
|
||||
elements={[
|
||||
<QuickWaveDrop
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function generateVariousContent(){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center"
|
||||
>
|
||||
<LoadingGroup
|
||||
label="Bouncing Dot"
|
||||
elements={[
|
||||
<BouncingDot
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Spinning Clock"
|
||||
elements={[
|
||||
<SpinningClock
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Spinning Eclipse"
|
||||
elements={[
|
||||
<SpinningEclipse
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Spinning Eclipse Half"
|
||||
elements={[
|
||||
<SpinningEclipseHalf
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Pulsing Line"
|
||||
elements={[
|
||||
<PulsingLine
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Spinning Binary"
|
||||
elements={[
|
||||
<SpinningBinary
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Spinning Tadpole"
|
||||
elements={[
|
||||
<SpinningTadpole
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Wifi"
|
||||
elements={[
|
||||
<Wifi
|
||||
className="fill-blue-600"
|
||||
/>,
|
||||
<Wifi
|
||||
className="fill-blue-600"
|
||||
fadeDuration={0.25}
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<LoadingGroup
|
||||
label="Spinning Galaxy"
|
||||
elements={[
|
||||
<SpinningGalaxy
|
||||
className="fill-blue-600"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user