copy MDC DOM and add MDC styles

Author: annieyw

src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss

@@ -1,7 +1,33 @@
-@mixin mat-mdc-progress-spinner-color($config-or-theme) {}
+@import '@material/linear-progress/mixins.import';
+@import '@material/theme/functions.import';
+@import '../mdc-helpers/mdc-helpers';
 
-@mixin mat-mdc--progress-spinner-typography($config-or-theme) {}
+@mixin mat-mdc-progress-spinner-color($config-or-theme) {
+  $config: mat-get-color-config($config-or-theme);
+  @include mat-using-mdc-theme($config) {
+    @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
+  }
+}
 
-@mixin _mat-mdc-progress-spinner-density($config-or-theme) {}
+@mixin mat-mdc-progress-spinner-typography($config-or-theme) {}
 
-@mixin mat-mdc-progress-spinner-theme($theme-or-color-config) {}
+@mixin mat-mdc-progress-spinner-density($config-or-theme) {}
+
+@mixin mat-mdc-progress-spinner-theme($theme-or-color-config) {
+  $theme: _mat-legacy-get-theme($theme-or-color-config);
+  @include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-progress-spinner') {
+    $color: mat-get-color-config($theme);
+    $density: mat-get-density-config($theme);
+    $typography: mat-get-typography-config($theme);
+
+    @if $color != null {
+      @include mat-mdc-progress-spinner-color($color);
+    }
+    @if $density != null {
+      @include mat-mdc-progress-spinner-density($density);
+    }
+    @if $typography != null {
+      @include mat-mdc-progress-spinner-typography($typography);
+    }
+  }
+}

src/material-experimental/mdc-progress-spinner/progress-spinner.html

@@ -1 +1,24 @@
-WIP: MDC-based progress spinner
+<div class="mdc-circular-progress" style="width:48px;height:48px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
+  <div class="mdc-circular-progress__determinate-container">
+    <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097" stroke-width="4"/>
+    </svg>
+  </div>
+  <div class="mdc-circular-progress__indeterminate-container">
+    <div class="mdc-circular-progress__spinner-layer">
+      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
+        </svg>
+      </div><div class="mdc-circular-progress__gap-patch">
+      <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.2"/>
+      </svg>
+    </div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
+      <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
+      </svg>
+    </div>
+    </div>
+  </div>
+</div>

src/material-experimental/mdc-progress-spinner/progress-spinner.scss

@@ -0,0 +1,5 @@
+@import '@material/circular-progress/mixins.import';
+@import '../mdc-helpers/mdc-helpers';
+
+
+@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);