diff --git a/.changeset/wet-drinks-do.md b/.changeset/wet-drinks-do.md new file mode 100644 index 0000000..6222b4a --- /dev/null +++ b/.changeset/wet-drinks-do.md @@ -0,0 +1,5 @@ +--- +'@groupos/ui-components': patch +--- + +Button: use gradient loading spinner for loading state diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx index a0fc04b..9602c18 100644 --- a/packages/components/src/button/index.tsx +++ b/packages/components/src/button/index.tsx @@ -75,48 +75,39 @@ 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 - - - - - - - - + + + + + + + + + + + + + + + )