{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"spinner","type":"registry:ui","title":"spinner","description":"A spinner is a visual indicator that shows progress or activity.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"import { Spinner as ShadcnSpinner } from \"@repo/shadcn-ui/components/ui/spinner\";\nimport {\n  LoaderCircleIcon,\n  LoaderIcon,\n  LoaderPinwheelIcon,\n  type LucideProps,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ntype SpinnerVariantProps = Omit<SpinnerProps, \"variant\">;\n\nconst Throbber = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderIcon className={cn(\"animate-spin\", className)} {...props} />\n);\n\nconst Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (\n  <LoaderPinwheelIcon className={cn(\"animate-spin\", className)} {...props} />\n);\n\nconst CircleFilled = ({\n  className,\n  size = 24,\n  ...props\n}: SpinnerVariantProps) => (\n  <div className=\"relative\" style={{ width: size, height: size }}>\n    <div className=\"absolute inset-0 rotate-180\">\n      <LoaderCircleIcon\n        className={cn(\"animate-spin\", className, \"text-foreground opacity-20\")}\n        size={size}\n        {...props}\n      />\n    </div>\n    <LoaderCircleIcon\n      className={cn(\"relative animate-spin\", className)}\n      size={size}\n      {...props}\n    />\n  </div>\n);\n\nconst Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {\n  return (\n    <svg\n      height={size}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <title>Loading...</title>\n      <circle cx=\"4\" cy=\"12\" fill=\"currentColor\" r=\"2\">\n        <animate\n          attributeName=\"cy\"\n          begin=\"0;ellipsis3.end+0.25s\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          id=\"ellipsis1\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n          values=\"12;6;12\"\n        />\n      </circle>\n      <circle cx=\"12\" cy=\"12\" fill=\"currentColor\" r=\"2\">\n        <animate\n          attributeName=\"cy\"\n          begin=\"ellipsis1.begin+0.1s\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n          values=\"12;6;12\"\n        />\n      </circle>\n      <circle cx=\"20\" cy=\"12\" fill=\"currentColor\" r=\"2\">\n        <animate\n          attributeName=\"cy\"\n          begin=\"ellipsis1.begin+0.2s\"\n          calcMode=\"spline\"\n          dur=\"0.6s\"\n          id=\"ellipsis3\"\n          keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n          values=\"12;6;12\"\n        />\n      </circle>\n    </svg>\n  );\n};\n\nconst Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    height={size}\n    stroke=\"currentColor\"\n    viewBox=\"0 0 44 44\"\n    width={size}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth=\"2\">\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          calcMode=\"spline\"\n          dur=\"1.8s\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          keyTimes=\"0; 1\"\n          repeatCount=\"indefinite\"\n          values=\"1; 20\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          calcMode=\"spline\"\n          dur=\"1.8s\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          keyTimes=\"0; 1\"\n          repeatCount=\"indefinite\"\n          values=\"1; 0\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          calcMode=\"spline\"\n          dur=\"1.8s\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          keyTimes=\"0; 1\"\n          repeatCount=\"indefinite\"\n          values=\"1; 20\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          calcMode=\"spline\"\n          dur=\"1.8s\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          keyTimes=\"0; 1\"\n          repeatCount=\"indefinite\"\n          values=\"1; 0\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n\nconst Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    height={size}\n    viewBox=\"0 0 24 24\"\n    width={size}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <style>{`\n      .spinner-bar {\n        animation: spinner-bars-animation .8s linear infinite;\n        animation-delay: -.8s;\n      }\n      .spinner-bars-2 {\n        animation-delay: -.65s;\n      }\n      .spinner-bars-3 {\n        animation-delay: -0.5s;\n      }\n      @keyframes spinner-bars-animation {\n        0% {\n          y: 1px;\n          height: 22px;\n        }\n        93.75% {\n          y: 5px;\n          height: 14px;\n          opacity: 0.2;\n        }\n      }\n    `}</style>\n    <rect\n      className=\"spinner-bar\"\n      fill=\"currentColor\"\n      height=\"22\"\n      width=\"6\"\n      x=\"1\"\n      y=\"1\"\n    />\n    <rect\n      className=\"spinner-bar spinner-bars-2\"\n      fill=\"currentColor\"\n      height=\"22\"\n      width=\"6\"\n      x=\"9\"\n      y=\"1\"\n    />\n    <rect\n      className=\"spinner-bar spinner-bars-3\"\n      fill=\"currentColor\"\n      height=\"22\"\n      width=\"6\"\n      x=\"17\"\n      y=\"1\"\n    />\n  </svg>\n);\n\nconst Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (\n  <svg\n    height={size}\n    preserveAspectRatio=\"xMidYMid\"\n    viewBox=\"0 0 100 100\"\n    width={size}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Loading...</title>\n    <path\n      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\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeDasharray=\"205.271142578125 51.317785644531256\"\n      strokeLinecap=\"round\"\n      strokeWidth=\"10\"\n      style={{\n        transform: \"scale(0.8)\",\n        transformOrigin: \"50px 50px\",\n      }}\n    >\n      <animate\n        attributeName=\"stroke-dashoffset\"\n        dur=\"2s\"\n        keyTimes=\"0;1\"\n        repeatCount=\"indefinite\"\n        values=\"0;256.58892822265625\"\n      />\n    </path>\n  </svg>\n);\n\nexport type SpinnerProps = LucideProps & {\n  variant?:\n    | \"default\"\n    | \"throbber\"\n    | \"pinwheel\"\n    | \"circle-filled\"\n    | \"ellipsis\"\n    | \"ring\"\n    | \"bars\"\n    | \"infinite\";\n};\n\nexport const Spinner = ({ variant, ...props }: SpinnerProps) => {\n  switch (variant) {\n    case \"throbber\":\n      return <Throbber {...props} />;\n    case \"pinwheel\":\n      return <Pinwheel {...props} />;\n    case \"circle-filled\":\n      return <CircleFilled {...props} />;\n    case \"ellipsis\":\n      return <Ellipsis {...props} />;\n    case \"ring\":\n      return <Ring {...props} />;\n    case \"bars\":\n      return <Bars {...props} />;\n    case \"infinite\":\n      return <Infinite {...props} />;\n    default:\n      return (\n        <ShadcnSpinner className={cn(\"size-6\", props.className)} {...props} />\n      );\n  }\n};\n","target":"components/kibo-ui/spinner/index.tsx"}],"css":{}}