fix(css,react): smoother spinner animation using opacity

digdir · Nov 18, 2024 · a158a39 · a158a39
1 parent 58ecb78
commit a158a39
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/packages/css/spinner.css b/packages/css/spinner.css
@@ -1,6 +1,5 @@
 .ds-spinner {
-  --dsc-spinner-background: var(--ds-color-surface-default);
-  --dsc-spinner-stroke: var(--ds-color-border-default);
+  --dsc-spinner-color: currentColor;
 
   --dsc-spinner-animation-duration: 2s;
 
@@ -37,14 +36,24 @@
 }
 
 .ds-spinner__background {
-  stroke: var(--dsc-spinner-background);
+  stroke: var(--dsc-spinner-color);
+  opacity: 20%;
 }
 
 .ds-spinner__circle {
   animation: ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration);
   stroke-dasharray: 1px, 200px;
-  stroke: var(--dsc-spinner-stroke);
+  stroke: var(--dsc-spinner-color);
   transform-origin: center;
+  opacity: 75%;
+}
+
+&[data-color] {
+  --dsc-spinner-color: var(--ds-color-border-default);
+
+  .ds-spinner__circle {
+    opacity: 100%;
+  }
 }
 
 /* Prefers reduced motion needs longer animation,
@@ -75,10 +84,12 @@ but don't remove it since it is not decorative.
   50% {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -15px;
+    transform: rotate(0deg);
   }
 
   100% {
     stroke-dasharray: 1px, 200px;
     stroke-dashoffset: -120px;
+    transform: rotate(15deg);
   }
 }
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
@@ -193,15 +193,15 @@ export const TextAndIcon: StoryFn<typeof Button> = () => (
   </>
 );
 
-export const Loading: StoryFn<typeof Button> = () => (
+export const Loading: StoryFn<typeof Button> = (args) => (
   <>
-    <Button variant='primary' loading>
+    <Button {...args} variant='primary' loading>
       Laster...
     </Button>
-    <Button variant='secondary' loading>
+    <Button {...args} variant='secondary' loading>
       Laster...
     </Button>
-    <Button variant='tertiary' loading>
+    <Button {...args} variant='tertiary' loading>
       Laster...
     </Button>
   </>

diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -13,7 +13,7 @@ export type SpinnerProps = {
    */
   'data-size'?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
-   * The color of the spinner. If left unspecified, the color is inherited from the nearest ancestor with data-color.
+   * The color of the spinner. If left unspecified, the current text color (`currentColor`) is used.
    */
   'data-color'?: Color;
 } & ComponentPropsWithoutRef<'svg'> &