@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/x/loader-x.tsx

@@ -0,0 +1,1757 @@
+
+import { motion } from "motion/react";
+import React, { useState, useEffect, ComponentProps, useCallback, useRef } from "react";
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn, Card, SpinnerV2 } from "~/components/catalyst-ui"
+import { Loader2, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, type LucideProps, } from 'lucide-react';
+// @devsearch app/components/catalyst-ui/data/core-data.tsx:loaderX
+
+export type LoaderProps = LucideProps & {
+  variant?: 'default' | 'circle' | 'pinwheel' | 'circle-filled' | 'ellipsis' | 'ring' | 'bars' | 'infinite';
+  size?: number | string;
+  strokeWidth?: number;
+  fill?: string;
+  animationDuration?: string;
+  style?: React.CSSProperties;
+  spinning?: boolean;
+  delay?: number;
+  tip?: string;
+  indicator?: React.ReactNode;
+  text?: string;
+  subText?: string;
+  frames?: number[][];
+  dotClassName?: string;
+  isPlaying?: boolean;
+  duration?: number;
+  repeatCount?: number;
+  onComplete?: () => void;
+  outerSize?: string;
+  childSize?: string;
+  className?: string;
+  wrapperClassName?: string;
+  children?: React.ReactNode;
+};
+
+export const loaderVariants = cva(
+  "animate-spin rounded-full border-2 border-solid border-current border-r-transparent",
+  {
+    variants: {
+      size: {
+        default: {
+          container: "size-8",
+          titleClass: "text-sm/tight font-medium",
+          subtitleClass: "text-xs/relaxed",
+          spacing: "space-y-2",
+          maxWidth: "max-w-8",
+        },
+        sm: {
+          container: "size-20",
+          titleClass: "text-sm/tight font-medium",
+          subtitleClass: "text-xs/relaxed",
+          spacing: "space-y-2",
+          maxWidth: "max-w-48",
+        },
+        md: {
+          container: "size-32",
+          titleClass: "text-base/snug font-medium",
+          subtitleClass: "text-sm/relaxed",
+          spacing: "space-y-3",
+          maxWidth: "max-w-56",
+        },
+        lg: {
+          container: "size-40",
+          titleClass: "text-lg/tight font-semibold",
+          subtitleClass: "text-base/relaxed",
+          spacing: "space-y-4",
+          maxWidth: "max-w-64",
+        },
+      }
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export function LoaderX({ variant = 'default', ...props }: LoaderProps) {
+  switch (variant) {
+    case 'circle':
+      return <Circle {...props} />;
+    case 'pinwheel':
+      return <Pinwheel {...props} />;
+    case 'circle-filled':
+      return <CircleFilled {...props} />;
+    case 'ellipsis':
+      return <Ellipsis {...props} />;
+    case 'ring':
+      return <Ring {...props} />;
+    case 'bars':
+      return <Bars {...props} />;
+    case 'infinite':
+      return <Infinite {...props} />;
+    case '1':
+      return <LoaderOne {...props} />;
+    case '2':
+      return <LoaderTwo {...props} />;
+    case '3':
+      return <LoaderThree {...props} />;
+    case '4':
+      return <LoaderFour {...props} />;
+    case '5':
+      return <LoaderFive {...props} />;
+    case '6':
+      return <LoaderSix {...props} />;
+    case '7':
+      return <LoaderSeven {...props} />;
+    case '8':
+      return <LoaderEight {...props} />;
+    case '9':
+      return <LoaderNine {...props} />;
+    case '10':
+      return <LoaderTen {...props} />;
+    case '11':
+      return <LoaderEleven {...props} />;
+    case '12':
+      return <LoaderTwelve {...props} />;
+    case '13':
+      return <LoaderThirteen {...props} />;
+    case '14':
+      return <LoaderFourteen {...props} />;
+    case '15':
+      return <LoaderFifteen {...props} />;
+    case '16':
+      return <LoaderSixteen {...props} />;
+    case '17':
+      return <LoaderSeventeen {...props} />;
+    case '18':
+      return <LoaderEighteen {...props} />;
+    case '19':
+      return <LoaderNineteen {...props} />;
+    case '20':
+      return <LoaderTwenty {...props} />;
+    case '21':
+      return <LoaderTwentyOne {...props} />;
+    case '22':
+      return <LoaderTwentyTwo {...props} />;
+    case 'default':
+    default:
+      return <Default {...props} />;
+  }
+}
+
+
+
+
+function LoaderTwentyTwo({
+  title = "Configuring your account...",
+  subtitle = "Please wait while we prepare everything for you",
+  size = "md",
+  className,
+  ...props
+}: LoaderProps) {
+  const sizeConfig = {
+    sm: {
+      container: "size-20",
+      titleClass: "text-sm/tight font-medium",
+      subtitleClass: "text-xs/relaxed",
+      spacing: "space-y-2",
+      maxWidth: "max-w-48",
+    },
+    md: {
+      container: "size-32",
+      titleClass: "text-base/snug font-medium",
+      subtitleClass: "text-sm/relaxed",
+      spacing: "space-y-3",
+      maxWidth: "max-w-56",
+    },
+    lg: {
+      container: "size-40",
+      titleClass: "text-lg/tight font-semibold",
+      subtitleClass: "text-base/relaxed",
+      spacing: "space-y-4",
+      maxWidth: "max-w-64",
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-8 p-8",
+        className
+      )}
+      {...props}
+    >
+      {/* Enhanced Monochrome Loader */}
+      <motion.div
+        className={cn("relative", config.container)}
+        animate={{
+          scale: [1, 1.02, 1],
+        }}
+        transition={{
+          duration: 4,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: [0.4, 0, 0.6, 1],
+        }}
+      >
+        {/* Outer elegant ring with shimmer */}
+        <motion.div
+          className="absolute inset-0 rounded-full"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 90deg, transparent 180deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            opacity: 0.8,
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 3,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "linear",
+          }}
+        />
+
+        {/* Primary animated ring with gradient */}
+        <motion.div
+          className="absolute inset-0 rounded-full"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 120deg, rgba(0, 0, 0, 0.5) 240deg, transparent 360deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            opacity: 0.9,
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 2.5,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: [0.4, 0, 0.6, 1],
+          }}
+        />
+
+        {/* Secondary elegant ring - counter rotation */}
+        <motion.div
+          className="absolute inset-0 rounded-full"
+          style={{
+            background: `conic-gradient(from 180deg, transparent 0deg, rgba(0, 0, 0, 0.6) 45deg, transparent 90deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            opacity: 0.35,
+          }}
+          animate={{
+            rotate: [0, -360],
+          }}
+          transition={{
+            duration: 4,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: [0.4, 0, 0.6, 1],
+          }}
+        />
+
+        {/* Accent particles */}
+        <motion.div
+          className="absolute inset-0 rounded-full"
+          style={{
+            background: `conic-gradient(from 270deg, transparent 0deg, rgba(0, 0, 0, 0.4) 20deg, transparent 40deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            opacity: 0.5,
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 3.5,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "linear",
+          }}
+        />
+
+        {/* Dark mode variants */}
+        <motion.div
+          className="absolute inset-0 rounded-full dark:block hidden"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 90deg, transparent 180deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            opacity: 0.8,
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 3,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "linear",
+          }}
+        />
+
+        <motion.div
+          className="absolute inset-0 rounded-full dark:block hidden"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 120deg, rgba(255, 255, 255, 0.5) 240deg, transparent 360deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            opacity: 0.9,
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 2.5,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: [0.4, 0, 0.6, 1],
+          }}
+        />
+
+        <motion.div
+          className="absolute inset-0 rounded-full dark:block hidden"
+          style={{
+            background: `conic-gradient(from 180deg, transparent 0deg, rgba(255, 255, 255, 0.6) 45deg, transparent 90deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            opacity: 0.35,
+          }}
+          animate={{
+            rotate: [0, -360],
+          }}
+          transition={{
+            duration: 4,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: [0.4, 0, 0.6, 1],
+          }}
+        />
+
+        <motion.div
+          className="absolute inset-0 rounded-full dark:block hidden"
+          style={{
+            background: `conic-gradient(from 270deg, transparent 0deg, rgba(255, 255, 255, 0.4) 20deg, transparent 40deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            opacity: 0.5,
+          }}
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 3.5,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "linear",
+          }}
+        />
+      </motion.div>
+
+      {/* Enhanced Typography with Breathing Animation */}
+      <motion.div
+        className={cn("text-center", config.spacing, config.maxWidth)}
+        initial={{ opacity: 0, y: 12 }}
+        animate={{
+          opacity: 1,
+          y: 0,
+        }}
+        transition={{
+          delay: 0.4,
+          duration: 1,
+          ease: [0.4, 0, 0.2, 1],
+        }}
+      >
+        {/* Clean title with subtle animation */}
+        <motion.h1
+          className={cn(
+            config.titleClass,
+            "text-black/90 dark:text-white/90 font-medium tracking-[-0.02em] leading-[1.15] antialiased"
+          )}
+          initial={{ opacity: 0, y: 12 }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          transition={{
+            delay: 0.6,
+            duration: 0.8,
+            ease: [0.4, 0, 0.2, 1],
+          }}
+        >
+          <motion.span
+            animate={{
+              opacity: [0.9, 0.7, 0.9],
+            }}
+            transition={{
+              duration: 3,
+              repeat: Number.POSITIVE_INFINITY,
+              ease: [0.4, 0, 0.6, 1],
+            }}
+          >
+            {title}
+          </motion.span>
+        </motion.h1>
+
+        {/* Clean subtitle with subtle animation */}
+        <motion.p
+          className={cn(
+            config.subtitleClass,
+            "text-black/60 dark:text-white/60 font-normal tracking-[-0.01em] leading-[1.45] antialiased"
+          )}
+          initial={{ opacity: 0, y: 8 }}
+          animate={{
+            opacity: 1,
+            y: 0,
+          }}
+          transition={{
+            delay: 0.8,
+            duration: 0.8,
+            ease: [0.4, 0, 0.2, 1],
+          }}
+        >
+          <motion.span
+            animate={{
+              opacity: [0.6, 0.4, 0.6],
+            }}
+            transition={{
+              duration: 4,
+              repeat: Number.POSITIVE_INFINITY,
+              ease: [0.4, 0, 0.6, 1],
+            }}
+          >
+            {subtitle}
+          </motion.span>
+        </motion.p>
+      </motion.div>
+    </div>
+  );
+}
+const Default = ({ className, ...props }: LoaderProps) => (
+  <LoaderIcon className={cn('animate-spin', className)} {...(props as any)} />
+);
+
+const Circle = ({ className, ...props }: LoaderProps) => (
+  <LoaderCircleIcon className={cn('animate-spin', className)} {...(props as any)} />
+);
+
+const Pinwheel = ({ className, ...props }: LoaderProps) => (
+  <LoaderPinwheelIcon className={cn('animate-spin', className)} {...(props as any)} />
+);
+
+const CircleFilled = ({
+  className,
+  size = 24,
+  ...props
+}: LoaderProps) => (
+  <div className="relative" style={{ width: size, height: size }}>
+    <div className="absolute inset-0 rotate-180">
+      <LoaderCircleIcon
+        className={cn('animate-spin', className, 'text-foreground opacity-20')}
+        size={size}
+        {...(props as any)}
+      />
+    </div>
+    <LoaderCircleIcon
+      className={cn('relative animate-spin', className)}
+      size={size}
+      {...(props as any)}
+    />
+  </div>
+);
+
+const Ellipsis = ({ size = 24, ...props }: LoaderProps) => {
+  return (
+    <svg
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...(props as any)}
+    >
+      <circle cx="4" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="0;ellipsis3.end+0.25s"
+          calcMode="spline"
+          dur="0.6s"
+          id="ellipsis1"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+      <circle cx="12" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="ellipsis1.begin+0.1s"
+          calcMode="spline"
+          dur="0.6s"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+      <circle cx="20" cy="12" fill="currentColor" r="2">
+        <animate
+          attributeName="cy"
+          begin="ellipsis1.begin+0.2s"
+          calcMode="spline"
+          dur="0.6s"
+          id="ellipsis3"
+          keySplines=".33,.66,.66,1;.33,0,.66,.33"
+          values="12;6;12"
+        />
+      </circle>
+    </svg>
+  );
+};
+
+const Ring = ({ size = 24, ...props }: LoaderProps) => (
+  <svg
+    height={size}
+    stroke="currentColor"
+    viewBox="0 0 44 44"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...(props as any)}
+  >
+    <g fill="none" fillRule="evenodd" strokeWidth="2">
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="0s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity"
+          begin="-0.9s"
+          calcMode="spline"
+          dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1"
+          keyTimes="0; 1"
+          repeatCount="indefinite"
+          values="1; 0"
+        />
+      </circle>
+    </g>
+  </svg>
+);
+
+const Bars = ({ size = 24, ...props }: LoaderProps) => (
+  <svg
+    height={size}
+    viewBox="0 0 24 24"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...(props as any)}
+  >
+    <style>{`
+      .spinner-bar {
+        animation: spinner-bars-animation .8s linear infinite;
+        animation-delay: -.8s;
+      }
+      .spinner-bars-2 {
+        animation-delay: -.65s;
+      }
+      .spinner-bars-3 {
+        animation-delay: -0.5s;
+      }
+      @keyframes spinner-bars-animation {
+        0% {
+          y: 1px;
+          height: 22px;
+        }
+        93.75% {
+          y: 5px;
+          height: 14px;
+          opacity: 0.2;
+        }
+      }
+    `}</style>
+    <rect
+      className="spinner-bar"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="1"
+      y="1"
+    />
+    <rect
+      className="spinner-bar spinner-bars-2"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="9"
+      y="1"
+    />
+    <rect
+      className="spinner-bar spinner-bars-3"
+      fill="currentColor"
+      height="22"
+      width="6"
+      x="17"
+      y="1"
+    />
+  </svg>
+);
+
+const Infinite = ({ size = 24, ...props }: LoaderProps) => (
+  <svg
+    height={size}
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 100 100"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...(props as any)}
+  >
+    <path
+      d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
+      fill="none"
+      stroke="currentColor"
+      strokeDasharray="205.271142578125 51.317785644531256"
+      strokeLinecap="round"
+      strokeWidth="10"
+      style={{
+        transform: 'scale(0.8)',
+        transformOrigin: '50px 50px',
+      }}
+    >
+      <animate
+        attributeName="stroke-dashoffset"
+        dur="2s"
+        keyTimes="0;1"
+        repeatCount="indefinite"
+        values="0;256.58892822265625"
+      />
+    </path>
+  </svg>
+);
+
+function LoaderOne() {
+  const transition = (x: number) => {
+    return {
+      duration: 1,
+      repeat: Infinity,
+      repeatType: "loop" as const,
+      delay: x * 0.2,
+      ease: "easeInOut",
+    };
+  };
+  return (
+    <div className="flex items-center gap-2">
+      <motion.div
+        initial={{ y: 0 }}
+        animate={{ y: [0, 10, 0] }}
+        transition={transition(0)}
+        className="h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300"
+      />
+      <motion.div
+        initial={{ y: 0 }}
+        animate={{ y: [0, 10, 0] }}
+        transition={transition(1)}
+        className="h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300"
+      />
+      <motion.div
+        initial={{ y: 0 }}
+        animate={{ y: [0, 10, 0] }}
+        transition={transition(2)}
+        className="h-4 w-4 rounded-full border border-neutral-300 bg-gradient-to-b from-neutral-400 to-neutral-300"
+      />
+    </div>
+  );
+}
+
+function LoaderTwo() {
+  const transition = (x: number) => {
+    return {
+      duration: 2,
+      repeat: Infinity,
+      repeatType: "loop" as const,
+      delay: x * 0.2,
+      ease: "easeInOut",
+    };
+  };
+  return (
+    <div className="flex items-center">
+      <motion.div
+        transition={transition(0)}
+        initial={{ x: 0 }}
+        animate={{ x: [0, 20, 0] }}
+        className="h-4 w-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500"
+      />
+      <motion.div
+        initial={{ x: 0 }}
+        animate={{ x: [0, 20, 0] }}
+        transition={transition(0.4)}
+        className="h-4 w-4 -translate-x-2 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500"
+      />
+      <motion.div
+        initial={{ x: 0 }}
+        animate={{ x: [0, 20, 0] }}
+        transition={transition(0.8)}
+        className="h-4 w-4 -translate-x-4 rounded-full bg-neutral-200 shadow-md dark:bg-neutral-500"
+      />
+    </div>
+  );
+}
+
+function LoaderThree() {
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-20 w-20 stroke-neutral-500 [--fill-final:var(--color-yellow-300)] [--fill-initial:var(--color-neutral-50)] dark:stroke-neutral-100 dark:[--fill-final:var(--color-yellow-500)] dark:[--fill-initial:var(--color-neutral-800)]"
+    >
+      <motion.path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <motion.path
+        initial={{ pathLength: 0, fill: "var(--fill-initial)" }}
+        animate={{ pathLength: 1, fill: "var(--fill-final)" }}
+        transition={{
+          duration: 2,
+          ease: "easeInOut",
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"
+      />
+    </motion.svg>
+  );
+}
+
+function LoaderFour({ text = "Loading..." }: { text?: string }) {
+  return (
+    <div className="relative font-bold text-black [perspective:1000px] dark:text-white">
+      <motion.span
+        animate={{
+          skew: [0, -40, 0],
+          scaleX: [1, 2, 1],
+        }}
+        transition={{
+          duration: 0.05,
+          repeat: Infinity,
+          repeatType: "reverse",
+          repeatDelay: 2,
+          ease: "linear",
+          times: [0, 0.2, 0.5, 0.8, 1],
+        }}
+        className="relative z-20 inline-block"
+      >
+        {text}
+      </motion.span>
+      <motion.span
+        className="absolute inset-0 text-[#00e571]/50 blur-[0.5px] dark:text-[#00e571]"
+        animate={{
+          x: [-2, 4, -3, 1.5, -2],
+          y: [-2, 4, -3, 1.5, -2],
+          opacity: [0.3, 0.9, 0.4, 0.8, 0.3],
+        }}
+        transition={{
+          duration: 0.5,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "linear",
+          times: [0, 0.2, 0.5, 0.8, 1],
+        }}
+      >
+        {text}
+      </motion.span>
+      <motion.span
+        className="absolute inset-0 text-[#8b00ff]/50 dark:text-[#8b00ff]"
+        animate={{
+          x: [0, 1, -1.5, 1.5, -1, 0],
+          y: [0, -1, 1.5, -0.5, 0],
+          opacity: [0.4, 0.8, 0.3, 0.9, 0.4],
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+          ease: "linear",
+          times: [0, 0.3, 0.6, 0.8, 1],
+        }}
+      >
+        {text}
+      </motion.span>
+    </div>
+  );
+}
+
+function LoaderFive({ text }: { text: string }) {
+  return (
+    <div className="font-sans font-bold [--shadow-color:var(--color-neutral-500)] dark:[--shadow-color:var(--color-neutral-100)]">
+      {text.split("").map((char, i) => (
+        <motion.span
+          key={i}
+          className="inline-block"
+          initial={{ scale: 1, opacity: 0.5 }}
+          animate={{
+            scale: [1, 1.1, 1],
+            textShadow: [
+              "0 0 0 var(--shadow-color)",
+              "0 0 1px var(--shadow-color)",
+              "0 0 0 var(--shadow-color)",
+            ],
+            opacity: [0.5, 1, 0.5],
+          }}
+          transition={{
+            duration: 0.5,
+            repeat: Infinity,
+            repeatType: "loop",
+            delay: i * 0.05,
+            ease: "easeInOut",
+            repeatDelay: 2,
+          }}
+        >
+          {char === " " ? "\u00A0" : char}
+        </motion.span>
+      ))}
+    </div>
+  );
+}
+
+function LoaderSix({ text = 'Loading...' }) {
+  return (
+    <div className='flex flex-col items-center gap-3'>
+      <SpinnerV2 />
+      <p className='ml-3'>{text}</p>
+    </div>
+  );
+}
+
+function LoaderSeven({ className, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof loaderVariants>) {
+  const config = loaderVariants({ size }) as any;
+
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      className={cn(config.container, className)}
+      {...props}
+    />
+  )
+}
+function LoaderEight() {
+  return (
+    <div className="relative w-24 h-24">
+      <div className="absolute inset-0 border-4 border-primary/30 rounded-full animate-ping"></div>
+      <div className="absolute inset-2 border-4 border-t-primary border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
+    </div>
+  );
+}
+
+function LoaderNine({
+  spinning = true,
+  delay = 0,
+  size = "lg",
+  tip,
+  className,
+  children,
+  wrapperClassName
+}: LoaderProps) {
+  const [shouldShow, setShouldShow] = useState(!delay);
+
+  useEffect(() => {
+    if (!spinning || !delay) {
+      setShouldShow(spinning);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setShouldShow(spinning);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [spinning, delay]);
+
+  if (!shouldShow) {
+    return children ? <div className={wrapperClassName}>{children}</div> : null;
+  }
+
+  return (
+    <div className={cn("relative", wrapperClassName)}>
+      <div className={cn("absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity", spinning ? "opacity-100 z-10" : "opacity-0 -z-10")}>
+        <div className={cn("flex flex-col items-center justify-center gap-2", !children && "p-4")}>
+          <Loader2 className={cn("animate-spin text-primary", loaderVariants({ size: size as any, className }))} />
+          {tip && <span className="text-sm text-muted-foreground">{tip}</span>}
+        </div>
+      </div>
+      <div className={spinning ? "opacity-50 pointer-events-none" : ""}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function LoaderTen({
+  text = null,
+  subText = null,
+  size = "md",
+  className,
+  ...props
+}: LoaderProps) {
+
+  const config = loaderVariants({ size }) as any;
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center gap-8 p-8", className)}  {...props}  >
+      <div
+        className={cn("relative", config.container)}
+        style={{
+          animation: "spinnerPulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        }}
+      >
+        <div
+          className="absolute inset-0 rounded-full dark:hidden"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 90deg, transparent 180deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            opacity: 0.8,
+            animation: "spinnerRotate 3s linear infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full dark:hidden"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(0, 0, 0) 120deg, rgba(0, 0, 0, 0.5) 240deg, transparent 360deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            opacity: 0.9,
+            animation: "spinnerRotate 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full dark:hidden"
+          style={{
+            background: `conic-gradient(from 180deg, transparent 0deg, rgba(0, 0, 0, 0.6) 45deg, transparent 90deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            opacity: 0.35,
+            animation: "spinnerRotateReverse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full dark:hidden"
+          style={{
+            background: `conic-gradient(from 270deg, transparent 0deg, rgba(0, 0, 0, 0.4) 20deg, transparent 40deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            opacity: 0.5,
+            animation: "spinnerRotate 3.5s linear infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full hidden dark:block"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 90deg, transparent 180deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 35%, black 37%, black 39%, transparent 41%)`,
+            opacity: 0.8,
+            animation: "spinnerRotate 3s linear infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full hidden dark:block"
+          style={{
+            background: `conic-gradient(from 0deg, transparent 0deg, rgb(255, 255, 255) 120deg, rgba(255, 255, 255, 0.5) 240deg, transparent 360deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 42%, black 44%, black 48%, transparent 50%)`,
+            opacity: 0.9,
+            animation: "spinnerRotate 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full hidden dark:block"
+          style={{
+            background: `conic-gradient(from 180deg, transparent 0deg, rgba(255, 255, 255, 0.6) 45deg, transparent 90deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 52%, black 54%, black 56%, transparent 58%)`,
+            opacity: 0.35,
+            animation: "spinnerRotateReverse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          }}
+        />
+
+        <div
+          className="absolute inset-0 rounded-full hidden dark:block"
+          style={{
+            background: `conic-gradient(from 270deg, transparent 0deg, rgba(255, 255, 255, 0.4) 20deg, transparent 40deg)`,
+            mask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            WebkitMask: `radial-gradient(circle at 50% 50%, transparent 61%, black 62%, black 63%, transparent 64%)`,
+            opacity: 0.5,
+            animation: "spinnerRotate 3.5s linear infinite",
+          }}
+        />
+      </div>
+
+      <div
+        className={cn("text-center", config.spacing, config.maxWidth)}
+        style={{
+          animation: "spinnerFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards",
+        }}
+      >
+        <h1
+          className={cn(
+            config.titleClass,
+            "text-black/90 dark:text-white/90 font-medium tracking-[-0.02em] leading-[1.15] antialiased"
+          )}
+          style={{
+            animation: "spinnerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards",
+          }}
+        >
+          <span
+            style={{
+              animation: "spinnerBreath 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+            }}
+          >
+            {text}
+          </span>
+        </h1>
+
+        <p
+          className={cn(
+            config.subtitleClass,
+            "text-black/60 dark:text-white/60 font-normal tracking-[-0.01em] leading-[1.45] antialiased"
+          )}
+          style={{
+            animation: "spinnerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s backwards",
+          }}
+        >
+          <span
+            style={{
+              animation: "spinnerBreathSubtle 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+            }}
+          >
+            {subText}
+          </span>
+        </p>
+      </div>
+
+      <style jsx>{`
+        @keyframes spinnerRotate {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        
+        @keyframes spinnerRotateReverse {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(-360deg);
+          }
+        }
+        
+        @keyframes spinnerPulse {
+          0%, 100% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.02);
+          }
+        }
+        
+        @keyframes spinnerFadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(12px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        @keyframes spinnerBreath {
+          0%, 100% {
+            opacity: 0.9;
+          }
+          50% {
+            opacity: 0.7;
+          }
+        }
+        
+        @keyframes spinnerBreathSubtle {
+          0%, 100% {
+            opacity: 0.6;
+          }
+          50% {
+            opacity: 0.4;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+function LoaderEleven({
+  size = "2em",
+  strokeWidth = 2,
+  fill = "transparent",
+  animationDuration = "2s",
+  className,
+  style,
+  ...props
+}: LoaderProps) {
+  const sizeValue = typeof size === "number" ? size + 'px' : size;
+
+  return (
+    <div
+      className={cn("inline-block", className)}
+      style={{
+        width: sizeValue,
+        height: sizeValue,
+        ...style,
+      }}
+      role="progressbar"
+      {...props}
+    >
+      <svg
+        className="animate-spin"
+        width="100%"
+        height="100%"
+        viewBox="0 0 50 50"
+        style={{ animationDuration }}
+      >
+        <circle
+          cx="25"
+          cy="25"
+          r="20"
+          fill={fill}
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray="31.416"
+          strokeDashoffset="31.416"
+          className="opacity-25"
+        />
+        <circle
+          cx="25"
+          cy="25"
+          r="20"
+          fill={fill}
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray="31.416"
+          strokeDashoffset="7.854"
+          className="opacity-100"
+        />
+      </svg>
+    </div>
+  );
+}
+
+const game = [
+  [14, 7, 0, 8, 6, 13, 20],
+  [14, 7, 13, 20, 16, 27, 21],
+  [14, 20, 27, 21, 34, 24, 28],
+  [27, 21, 34, 28, 41, 32, 35],
+  [34, 28, 41, 35, 48, 40, 42],
+  [34, 28, 41, 35, 48, 42, 46],
+  [34, 28, 41, 35, 48, 42, 38],
+  [34, 28, 41, 35, 48, 30, 21],
+  [34, 28, 41, 48, 21, 22, 14],
+  [34, 28, 41, 21, 14, 16, 27],
+  [34, 28, 21, 14, 10, 20, 27],
+  [28, 21, 14, 4, 13, 20, 27],
+  [28, 21, 14, 12, 6, 13, 20],
+  [28, 21, 14, 6, 13, 20, 11],
+  [28, 21, 14, 6, 13, 20, 10],
+  [14, 6, 13, 20, 9, 7, 21],
+];
+
+function LoaderTwelve({
+  frames = game,
+  isPlaying = true,
+  duration = 100,
+  dotClassName,
+  className,
+  repeatCount = -1,
+  onComplete,
+  ...props
+}: LoaderProps) {
+  const gridRef = useRef<HTMLDivElement>(null);
+  const currentIndex = useRef(0);
+  const repeats = useRef(0);
+  const interval = useRef<NodeJS.Timeout | null>(null);
+
+  const applyFrameToDots = useCallback(
+    (dots: HTMLDivElement[], frameIndex: number) => {
+      const frame = frames[frameIndex];
+      if (!frame) return;
+
+      dots.forEach((dot, index) => {
+        dot.classList.toggle("active", frame.includes(index));
+      });
+    },
+    [frames],
+  );
+
+  useEffect(() => {
+    currentIndex.current = 0;
+    repeats.current = 0;
+  }, [frames]);
+
+  useEffect(() => {
+    if (isPlaying) {
+      if (currentIndex.current >= frames.length) {
+        currentIndex.current = 0;
+      }
+      const dotElements = gridRef.current?.children;
+      if (!dotElements) return;
+      const dots = Array.from(dotElements) as HTMLDivElement[];
+      interval.current = setInterval(() => {
+        applyFrameToDots(dots, currentIndex.current);
+        if (currentIndex.current + 1 >= frames.length) {
+          if (repeatCount != -1 && repeats.current + 1 >= repeatCount) {
+            clearInterval(interval.current!);
+            onComplete?.();
+          }
+          repeats.current++;
+        }
+        currentIndex.current = (currentIndex.current + 1) % frames.length;
+      }, duration);
+    } else {
+      if (interval.current) clearInterval(interval.current);
+    }
+
+    return () => {
+      if (interval.current) clearInterval(interval.current);
+    };
+  }, [frames, isPlaying, applyFrameToDots, duration, repeatCount, onComplete]);
+
+  return (
+    <div {...props} ref={gridRef} className={cn("grid w-fit grid-cols-7 gap-0.5", className)}>
+      {Array.from({ length: 49 }).map((_, i) => (
+        <div key={i} className={cn("h-1.5 w-1.5 rounded-sm bg-muted-foreground/20", dotClassName, "[&.active]:bg-foreground")} />
+      ))}
+    </div>
+  );
+}
+
+function LoaderThirteen({ variant = 'circle', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderFourteen({ variant = 'pinwheel', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderFifteen({ variant = 'circle-filled', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderSixteen({ variant = 'ellipsis', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderSeventeen({ variant = 'ring', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderEighteen({ variant = 'bars', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderNineteen({ variant = 'infinite', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderTwenty({ variant = 'default', ...props }: LoaderProps) {
+  return <Loader variant={variant} {...props} />;
+}
+
+function LoaderTwentyOne({ className, outerSize, childSize }: LoaderProps) {
+  return (
+    <div
+      className={cn(
+        "m-2 h-8 w-8 animate-spin items-center justify-center rounded-full bg-gradient-to-bl from-pink-500 to-blue-600 p-0.5",
+        className,
+        outerSize,
+      )}
+    >
+      <div className={cn("h-6 w-6 rounded-full bg-white", childSize)} />
+    </div>
+  );
+}
+
+export function LoaderOneDemo() {
+  return <LoaderOne />;
+}
+export function LoaderTwoDemo() {
+  return <LoaderTwo />;
+}
+export function LoaderThreeDemo() {
+  return <LoaderThree />;
+}
+export function LoaderFourDemo() {
+  return <LoaderFour />;
+}
+export function LoaderFiveDemo() {
+  return <LoaderFive text="Generating chat..." />;
+}
+export function LoaderSixDemo() {
+  return (
+    <div>
+      <LoaderSix />
+    </div>
+  );
+}
+export function LoaderSevenDemo() {
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">SpinnerV1 Sizes</h2>
+        <div className="flex items-center gap-4">
+          <LoaderSeven size="sm" />
+          <LoaderSeven size="default" />
+          <LoaderSeven size="lg" />
+          <LoaderSeven size="xl" />
+        </div>
+      </div>
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Custom Color</h2>
+        <div className="flex items-center gap-4">
+          <LoaderSeven className="text-primary" />
+          <LoaderSeven className="text-destructive" />
+        </div>
+      </div>
+    </div>
+  )
+}
+export function LoaderEightDemo() {
+  return (
+    <div>
+      <LoaderEight />
+    </div>
+  );
+}
+export function LoaderNineDemo() {
+  const [spinning, setSpinning] = useState(true);
+
+  return (
+    <div className="p-8 space-y-8">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Basic Usage</h3>
+        <LoaderNine spinning={spinning}>
+          <div className="p-6 border rounded-lg bg-card">
+            <h4 className="text-lg font-medium mb-2">Content Section</h4>
+            <p className="text-muted-foreground">
+              This content will be blurred when spinning is active.
+            </p>
+          </div>
+        </LoaderNine>
+        <button
+          onClick={() => setSpinning(!spinning)}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
+        >
+          {spinning ? "Stop" : "Start"} Spinning
+        </button>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">With Tip</h3>
+        <LoaderNine spinning tip="Loading..." size="large">
+          <div className="p-6 border rounded-lg bg-card">
+            <h4 className="text-lg font-medium mb-2">Another Section</h4>
+            <p className="text-muted-foreground">
+              This demonstrates the tip prop functionality.
+            </p>
+          </div>
+        </LoaderNine>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Different Sizes</h3>
+        <div className="flex gap-4 items-center">
+          <LoaderNine spinning size="small">
+            <div className="w-20 h-20 border rounded-lg bg-card"></div>
+          </LoaderNine>
+          <LoaderNine spinning size="default">
+            <div className="w-20 h-20 border rounded-lg bg-card"></div>
+          </LoaderNine>
+          <LoaderNine spinning size="large">
+            <div className="w-20 h-20 border rounded-lg bg-card"></div>
+          </LoaderNine>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Standalone</h3>
+        <LoaderNine spinning tip="Processing..." />
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">With Delay</h3>
+        <LoaderNine spinning delay={500} tip="Delayed loading...">
+          <div className="p-6 border rounded-lg bg-card">
+            <h4 className="text-lg font-medium mb-2">Delayed Content</h4>
+            <p className="text-muted-foreground">
+              This spinner will appear after 500ms delay.
+            </p>
+          </div>
+        </LoaderNine>
+      </div>
+    </div>
+  );
+}
+export function LoaderTenDemo() {
+  return (
+    <div className="space-y-8 p-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Loader Ten</h2>
+        <LoaderTen text="Configuring your account..." subText="Please wait while we prepare everything for you" />
+      </div>
+    </div>
+  )
+}
+export function LoaderElevenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <div className="space-y-2">
+          <h1 className="text-3xl font-bold">Spinner</h1>
+          <p className="text-muted-foreground">
+            Spinner is a process status indicator.
+          </p>
+        </div>
+
+        <div className="grid gap-8">
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Basic</h2>
+              <p className="text-muted-foreground">
+                An infinite spin animation is displayed by default.
+              </p>
+              <div className="flex items-center justify-center p-8 border rounded-lg bg-muted/50">
+                <LoaderEleven />
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<Spinner />`}
+                </code>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Custom</h2>
+              <p className="text-muted-foreground">
+                Spinner can be customized with styling property like style, strokeWidth and fill.
+              </p>
+              <div className="flex items-center justify-center p-8 border rounded-lg bg-muted/50">
+                <LoaderEleven
+                  size={50}
+                  strokeWidth={8}
+                  fill="hsl(var(--background))"
+                  animationDuration="0.5s"
+                />
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<Spinner 
+  size={50}
+  strokeWidth={8}
+  fill="hsl(var(--background))"
+  animationDuration="0.5s"
+/>`}
+                </code>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Sizes</h2>
+              <p className="text-muted-foreground">
+                Different sizes can be specified using the size property.
+              </p>
+              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={20} />
+                  <p className="text-xs text-muted-foreground">Small</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} />
+                  <p className="text-xs text-muted-foreground">Default</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={48} />
+                  <p className="text-xs text-muted-foreground">Large</p>
+                </div>
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<Spinner size={20} />
+<Spinner size={32} />
+<Spinner size={48} />`}
+                </code>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Colors</h2>
+              <p className="text-muted-foreground">
+                Custom colors can be applied using CSS variables or direct color values.
+              </p>
+              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
+                <div className="text-center space-y-2">
+                  <div className="text-red-500">
+                    <LoaderEleven size={32} />
+                  </div>
+                  <p className="text-xs text-muted-foreground">Red</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <div className="text-green-500">
+                    <LoaderEleven size={32} />
+                  </div>
+                  <p className="text-xs text-muted-foreground">Green</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <div className="text-blue-500">
+                    <LoaderEleven size={32} />
+                  </div>
+                  <p className="text-xs text-muted-foreground">Blue</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <div className="text-purple-500">
+                    <LoaderEleven size={32} />
+                  </div>
+                  <p className="text-xs text-muted-foreground">Purple</p>
+                </div>
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<div className="text-red-500">
+  <Spinner size={32} />
+</div>`}
+                </code>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Animation Speed</h2>
+              <p className="text-muted-foreground">
+                Control the animation speed with the animationDuration property.
+              </p>
+              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} animationDuration="0.5s" />
+                  <p className="text-xs text-muted-foreground">Fast (0.5s)</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} animationDuration="1s" />
+                  <p className="text-xs text-muted-foreground">Normal (1s)</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} animationDuration="3s" />
+                  <p className="text-xs text-muted-foreground">Slow (3s)</p>
+                </div>
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<Spinner animationDuration="0.5s" />
+<Spinner animationDuration="1s" />
+<Spinner animationDuration="3s" />`}
+                </code>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Stroke Width</h2>
+              <p className="text-muted-foreground">
+                Customize the thickness of the spinner with strokeWidth property.
+              </p>
+              <div className="flex items-center justify-center gap-8 p-8 border rounded-lg bg-muted/50">
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} strokeWidth={1} />
+                  <p className="text-xs text-muted-foreground">Thin (1px)</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} strokeWidth={3} />
+                  <p className="text-xs text-muted-foreground">Normal (3px)</p>
+                </div>
+                <div className="text-center space-y-2">
+                  <LoaderEleven size={32} strokeWidth={6} />
+                  <p className="text-xs text-muted-foreground">Thick (6px)</p>
+                </div>
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<Spinner strokeWidth={1} />
+<Spinner strokeWidth={3} />
+<Spinner strokeWidth={6} />`}
+                </code>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-6">
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">Accessibility</h2>
+              <p className="text-muted-foreground">
+                Spinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
+              </p>
+              <div className="flex items-center justify-center p-8 border rounded-lg bg-muted/50">
+                <LoaderEleven aria-label="Loading content" />
+              </div>
+              <div className="bg-muted/30 p-4 rounded-lg">
+                <code className="text-sm">
+                  {`<Spinner aria-label="Loading content" />`}
+                </code>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Component does not include any interactive elements.
+              </p>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+export function LoadertwelveDemo() {
+  return (
+    <div className="flex items-center gap-5 rounded bg-black px-4 py-3 text-white">
+      <div className="">
+        <LoaderTwelve
+          frames={game}
+          className="gap-0.5"
+          dotClassName="bg-white/15 [&.active]:bg-white size-1.5"></LoaderTwelve>
+      </div>
+      <p className="font-medium">Loading...</p>
+    </div>
+  );
+};
+export function LoaderThirteenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderThirteen />
+      </div>
+    </div>
+  )
+}
+export function LoaderFourteenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderFourteen />
+      </div>
+    </div>
+  )
+}
+export function LoaderFifthteenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderFifteen />
+      </div>
+    </div>
+  )
+}
+export function LoaderSixteenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderSixteen />
+      </div>
+    </div>
+  )
+}
+export function LoaderSeventeenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderSeventeen />
+      </div>
+    </div>
+  )
+}
+export function LoaderEightteenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderEighteen />
+      </div>
+    </div>
+  )
+}
+export function LoaderNineteenDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderNineteen />
+      </div>
+    </div>
+  )
+}
+export function LoaderTwentyDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderTwenty />
+      </div>
+    </div>
+  )
+}
+export function LoaderTwentyOneDemo() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-6xl mx-auto space-y-8">
+        <LoaderTwentyOne />
+      </div>
+    </div>
+  )
+}
+
+
+
+
+