Skip to content

Commit

Permalink
Resolves #57
Browse files Browse the repository at this point in the history
  • Loading branch information
@haydenbleasel
haydenbleasel committed Jan 22, 2025
1 parent ac7ab60 commit 5459b91
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 10 deletions.
2 changes: 1 addition & 1 deletion apps/docs/public/registry/spinner.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{
"type": "registry:ui",
"path": "index.tsx",
"content": "import { cn } from '@/lib/utils';\nimport {\n LoaderCircleIcon,\n LoaderIcon,\n LoaderPinwheelIcon,\n type LucideProps,\n} from 'lucide-react';\n\ntype SpinnerVariantProps = Omit<SpinnerProps, 'variant'>;\n\nconst Default = ({ className, ...props }: SpinnerVariantProps) => (\n <LoaderIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst Circle = ({ className, ...props }: SpinnerVariantProps) => (\n <LoaderCircleIcon 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.5 rounded-full border-2 border-current opacity-20\" />\n <LoaderCircleIcon\n className={cn('relative animate-spin', className)}\n {...props}\n />\n </div>\n);\n\nconst Ellipsis = (props: SpinnerVariantProps) => {\n return (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <title>Loading...</title>\n <circle cx=\"4\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n <animate\n id=\"ellipsis1\"\n begin=\"0;ellipsis3.end+0.25s\"\n attributeName=\"cy\"\n calcMode=\"spline\"\n dur=\"0.6s\"\n values=\"12;6;12\"\n keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n />\n </circle>\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n <animate\n begin=\"ellipsis1.begin+0.1s\"\n attributeName=\"cy\"\n calcMode=\"spline\"\n dur=\"0.6s\"\n values=\"12;6;12\"\n keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n />\n </circle>\n <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n <animate\n id=\"ellipsis3\"\n begin=\"ellipsis1.begin+0.2s\"\n attributeName=\"cy\"\n calcMode=\"spline\"\n dur=\"0.6s\"\n values=\"12;6;12\"\n keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n />\n </circle>\n </svg>\n );\n};\n\nconst Ring = ({ className, size = 24, ...props }: SpinnerVariantProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\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 dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n\nconst Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\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 className=\"spinner-bar\" x=\"1\" y=\"1\" width=\"6\" height=\"22\" />\n <rect\n className=\"spinner-bar spinner-bars-2\"\n x=\"9\"\n y=\"1\"\n width=\"6\"\n height=\"22\"\n />\n <rect\n className=\"spinner-bar spinner-bars-3\"\n x=\"17\"\n y=\"1\"\n width=\"6\"\n height=\"22\"\n />\n </svg>\n);\n\nconst Infinite = ({ className, size = 24, ...props }: SpinnerVariantProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n {...props}\n >\n <title>Loading...</title>\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"10\"\n strokeDasharray=\"205.271142578125 51.317785644531256\"\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 strokeLinecap=\"round\"\n style={{\n transform: 'scale(0.8)',\n transformOrigin: '50px 50px',\n }}\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n repeatCount=\"indefinite\"\n dur=\"2s\"\n keyTimes=\"0;1\"\n values=\"0;256.58892822265625\"\n />\n </path>\n </svg>\n);\n\nexport type SpinnerProps = LucideProps & {\n variant?:\n | 'default'\n | 'circle'\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 'circle':\n return <Circle {...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 <Default {...props} />;\n }\n};\n",
"content": "import { cn } from '@/lib/utils';\nimport {\n LoaderCircleIcon,\n LoaderIcon,\n LoaderPinwheelIcon,\n type LucideProps,\n} from 'lucide-react';\n\ntype SpinnerVariantProps = Omit<SpinnerProps, 'variant'>;\n\nconst Default = ({ className, ...props }: SpinnerVariantProps) => (\n <LoaderIcon className={cn('animate-spin', className)} {...props} />\n);\n\nconst Circle = ({ className, ...props }: SpinnerVariantProps) => (\n <LoaderCircleIcon 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 xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <title>Loading...</title>\n <circle cx=\"4\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n <animate\n id=\"ellipsis1\"\n begin=\"0;ellipsis3.end+0.25s\"\n attributeName=\"cy\"\n calcMode=\"spline\"\n dur=\"0.6s\"\n values=\"12;6;12\"\n keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n />\n </circle>\n <circle cx=\"12\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n <animate\n begin=\"ellipsis1.begin+0.1s\"\n attributeName=\"cy\"\n calcMode=\"spline\"\n dur=\"0.6s\"\n values=\"12;6;12\"\n keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n />\n </circle>\n <circle cx=\"20\" cy=\"12\" r=\"2\" fill=\"currentColor\">\n <animate\n id=\"ellipsis3\"\n begin=\"ellipsis1.begin+0.2s\"\n attributeName=\"cy\"\n calcMode=\"spline\"\n dur=\"0.6s\"\n values=\"12;6;12\"\n keySplines=\".33,.66,.66,1;.33,0,.66,.33\"\n />\n </circle>\n </svg>\n );\n};\n\nconst Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 44 44\"\n stroke=\"currentColor\"\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 dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"0s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n <circle cx=\"22\" cy=\"22\" r=\"1\">\n <animate\n attributeName=\"r\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 20\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.165, 0.84, 0.44, 1\"\n repeatCount=\"indefinite\"\n />\n <animate\n attributeName=\"stroke-opacity\"\n begin=\"-0.9s\"\n dur=\"1.8s\"\n values=\"1; 0\"\n calcMode=\"spline\"\n keyTimes=\"0; 1\"\n keySplines=\"0.3, 0.61, 0.355, 1\"\n repeatCount=\"indefinite\"\n />\n </circle>\n </g>\n </svg>\n);\n\nconst Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\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 x=\"1\"\n y=\"1\"\n width=\"6\"\n height=\"22\"\n fill=\"currentColor\"\n />\n <rect\n className=\"spinner-bar spinner-bars-2\"\n x=\"9\"\n y=\"1\"\n width=\"6\"\n height=\"22\"\n fill=\"currentColor\"\n />\n <rect\n className=\"spinner-bar spinner-bars-3\"\n x=\"17\"\n y=\"1\"\n width=\"6\"\n height=\"22\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 100 100\"\n preserveAspectRatio=\"xMidYMid\"\n {...props}\n >\n <title>Loading...</title>\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"10\"\n strokeDasharray=\"205.271142578125 51.317785644531256\"\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 strokeLinecap=\"round\"\n style={{\n transform: 'scale(0.8)',\n transformOrigin: '50px 50px',\n }}\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n repeatCount=\"indefinite\"\n dur=\"2s\"\n keyTimes=\"0;1\"\n values=\"0;256.58892822265625\"\n />\n </path>\n </svg>\n);\n\nexport type SpinnerProps = LucideProps & {\n variant?:\n | 'default'\n | 'circle'\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 'circle':\n return <Circle {...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 <Default {...props} />;\n }\n};\n",
"target": "components/ui/kibo-ui/spinner.tsx"
}
]
Expand Down
34 changes: 25 additions & 9 deletions packages/spinner/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,28 @@ const CircleFilled = ({
...props
}: SpinnerVariantProps) => (
<div className="relative" style={{ width: size, height: size }}>
<div className="absolute inset-0.5 rounded-full border-2 border-current opacity-20" />
<div className="absolute inset-0 rotate-180">
<LoaderCircleIcon
className={cn('animate-spin', className, 'text-foreground opacity-20')}
size={size}
{...props}
/>
</div>
<LoaderCircleIcon
className={cn('relative animate-spin', className)}
size={size}
{...props}
/>
</div>
);

const Ellipsis = (props: SpinnerVariantProps) => {
const Ellipsis = ({ size = 24, ...props }: SpinnerVariantProps) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 24 24"
{...props}
>
<title>Loading...</title>
Expand Down Expand Up @@ -80,7 +87,7 @@ const Ellipsis = (props: SpinnerVariantProps) => {
);
};

const Ring = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
const Ring = ({ size = 24, ...props }: SpinnerVariantProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
Expand Down Expand Up @@ -139,7 +146,7 @@ const Ring = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
</svg>
);

const Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
const Bars = ({ size = 24, ...props }: SpinnerVariantProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
Expand Down Expand Up @@ -171,25 +178,34 @@ const Bars = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
}
}
`}</style>
<rect className="spinner-bar" x="1" y="1" width="6" height="22" />
<rect
className="spinner-bar"
x="1"
y="1"
width="6"
height="22"
fill="currentColor"
/>
<rect
className="spinner-bar spinner-bars-2"
x="9"
y="1"
width="6"
height="22"
fill="currentColor"
/>
<rect
className="spinner-bar spinner-bars-3"
x="17"
y="1"
width="6"
height="22"
fill="currentColor"
/>
</svg>
);

const Infinite = ({ className, size = 24, ...props }: SpinnerVariantProps) => (
const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
Expand Down

0 comments on commit 5459b91

Please sign in to comment.