From 328ed2f60ac60926532a82ffd67d847aaef5944e 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 | 55 ++++++++++-------------- 1 file changed, 23 insertions(+), 32 deletions(-) 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 - - - - - - - - + + + + + + + + + + + + + + + )