From 7ec58f2e4087ce9b05529e6878f288baa78315f8 Mon Sep 17 00:00:00 2001 From: Aminejv Date: Mon, 18 Dec 2023 17:51:28 +0100 Subject: [PATCH] feat(button): use gradient loading spinner for loading state --- packages/components/src/button/index.tsx | 69 ++++++++++++------------ 1 file changed, 33 insertions(+), 36 deletions(-) diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index a0fc04b..8ec5e06 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -30,10 +30,10 @@ const buttonVariants = cva( export const Button = React.forwardRef< HTMLButtonElement, React.ComponentPropsWithoutRef<'button'> & - VariantProps & { - children: React.ReactNode - loading?: boolean - } + VariantProps & { + children: React.ReactNode + loading?: boolean + } >(({ children, className, variant = 'primary', size = 'md', fullWidth = false, loading, ...props }, ref) => { const buttonRef = React.useRef(null) @@ -75,48 +75,45 @@ const spinnerVariants = cva('animate-spin', { }) export const Spinner = ({ variant = 'primary', size = 'md' }: VariantProps) => ( + // this is custom made from this sample CodePen: https://codepen.io/mtvv/pen/JjdoPRr + // and this tutorial: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ + // it works by making two semi-circle arcs and applying 0->50 gradient on one and 50-100 gradient + // on the other to make it look like one continuous 0->100 gradient - - - - - - - - + + + + + + + + + + + + + + + )