refactor(circular-progress): Refactor spinner layer and color animation

This change allows users who want to use only one color spinner to discard the extraneous DOM elements associated with the other 3 colors.

It extracts 2 key animations into variables such that:
- The spinning animation is applied to the mdc-circular-progress__spinner-layer class only
- Both spinning + color change animations are applied to the mdc-circular-progress__color-{1,2,3,4} classes.

So the spinning logic no longer relies on the presence of any color classes.

PiperOrigin-RevId: 300197675

Author: allan-chen

packages/mdc-circular-progress/_mixins.scss

@@ -256,14 +256,29 @@
     }
   }
 
+  $spinner-rotate-animation:
+    mdc-circular-progress-spinner-layer-rotate
+    4 * variables.$arc-time
+    variables.$timing-function
+    infinite both;
+
+  .mdc-circular-progress__spinner-layer {
+    @include feature-targeting-mixins.targets($feat-animation) {
+      animation: $spinner-rotate-animation;
+    }
+  }
+
   @for $i from 1 through 4 {
+    $color-fade-in-out-animation:
+      mdc-circular-progress-color-#{$i}-fade-in-out
+      4 * variables.$arc-time
+      variables.$timing-function
+      infinite both;
+
     .mdc-circular-progress__color-#{$i} {
       @include feature-targeting-mixins.targets($feat-animation) {
         animation:
-          mdc-circular-progress-spinner-layer-rotate 4 * variables.$arc-time variables.$timing-function
-          infinite both,
-          mdc-circular-progress-color-#{$i}-fade-in-out 4 * variables.$arc-time variables.$timing-function
-          infinite both;
+          $spinner-rotate-animation, $color-fade-in-out-animation;
       }
     }
   }