Spinner: Intro animation refinements (#3904)

pinterest · Dec 4, 2024 · a3c45d7 · a3c45d7
1 parent e1a0857
commit a3c45d7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 42 deletions.
diff --git a/packages/gestalt/src/Spinner/VRSpinner.css b/packages/gestalt/src/Spinner/VRSpinner.css
@@ -27,52 +27,36 @@ svg * {
   transform-box: fill-box;
 }
 
-.spinner g {
+.spinner circle {
   /* Declaration of variables. Actual values are read from `styles` attirbute. */
   --g-start-x: 0;
   --g-start-y: 0;
 
-  animation-duration: var(--g-intro-duration);
-  animation-fill-mode: both;
-  animation-iteration-count: 1;
-  animation-name: dot-intro;
-  animation-timing-function: ease-in-out;
-  transform-origin: center center;
-}
-
-.spinner g:nth-child(1) {
-  animation-delay: var(--g-enter-delay);
-}
-
-.spinner g:nth-child(2) {
-  animation-delay: calc(var(--g-enter-delay) + 50ms);
-}
-
-.spinner g:nth-child(3) {
-  animation-delay: calc(var(--g-enter-delay) + 100ms);
-}
+  /* Shorthand for calculated delay. */
+  --g-base-delay: calc(var(--g-intro-duration) + var(--g-enter-delay));
 
-.spinner circle {
   animation-composition: add;
-  animation-duration: 1.8s, 800ms;
-  animation-iteration-count: infinite;
-  animation-name: colors, scale;
-  animation-timing-function: linear;
+  animation-duration: 800ms, 1.8s, var(--g-intro-duration);
+  animation-fill-mode: both;
+  animation-iteration-count: infinite, infinite, 1;
+  animation-name: scale, colors, dot-intro;
+  animation-timing-function: linear, linear, ease-in-out;
   transform-origin: center center;
 }
 
-.spinner g:nth-child(1) circle {
-  animation-delay: 0s, calc(var(--g-enter-delay) + var(--g-intro-duration));
+.spinner circle:nth-child(1) {
+  animation-delay: calc(var(--g-base-delay) + 0ms), var(--g-base-delay),
+    var(--g-enter-delay);
 }
 
-.spinner g:nth-child(2) circle {
-  animation-delay: 0s,
-    calc(var(--g-enter-delay) + var(--g-intro-duration) + 100ms);
+.spinner circle:nth-child(2) {
+  animation-delay: calc(var(--g-base-delay) + 100ms), var(--g-base-delay),
+    calc(var(--g-enter-delay) + 150ms);
 }
 
-.spinner g:nth-child(3) circle {
-  animation-delay: 0s,
-    calc(var(--g-enter-delay) + var(--g-intro-duration) + 200ms);
+.spinner circle:nth-child(3) {
+  animation-delay: calc(var(--g-base-delay) + 200ms), var(--g-base-delay),
+    calc(var(--g-enter-delay) + 300ms);
 }
 
 @keyframes dot-intro {

diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx
@@ -39,15 +39,24 @@ function SpinnerBody({
         }
       >
         <svg fill="none" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
-          <g style={{ '--g-start-x': '14px', '--g-start-y': '-8px' } as React.CSSProperties}>
-            <circle cx="14" cy="36" r="8" />
-          </g>
-          <g style={{ '--g-start-x': '0px', '--g-start-y': '16px' } as React.CSSProperties}>
-            <circle cx="28" cy="12" r="8" />
-          </g>
-          <g style={{ '--g-start-x': '-14px', '--g-start-y': '-8px' } as React.CSSProperties}>
-            <circle cx="42" cy="36" r="8" />
-          </g>
+          <circle
+            cx="28"
+            cy="12"
+            r="8"
+            style={{ '--g-start-x': '0px', '--g-start-y': '16px' } as React.CSSProperties}
+          />
+          <circle
+            cx="14"
+            cy="36"
+            r="8"
+            style={{ '--g-start-x': '14px', '--g-start-y': '-8px' } as React.CSSProperties}
+          />
+          <circle
+            cx="42"
+            cy="36"
+            r="8"
+            style={{ '--g-start-x': '-14px', '--g-start-y': '-8px' } as React.CSSProperties}
+          />
         </svg>
       </div>
     </Box>