From e94b384668bba6f3ce1e54d37d85e0cac6964595 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 20 Jul 2020 14:21:05 -0700
Subject: [PATCH 01/18] add files for MDC-based MatProgressSpinner

---
 .../mdc-progress-spinner/BUILD.bazel          |  0
 .../_progress-spinner-theme.scss              |  7 +++++++
 .../mdc-progress-spinner/index.ts             |  9 +++++++++
 .../mdc-progress-spinner/module.ts            | 18 ++++++++++++++++++
 .../progress-spinner.html                     |  1 +
 .../progress-spinner.scss                     |  0
 .../mdc-progress-spinner/progress-spinner.ts  | 19 +++++++++++++++++++
 .../mdc-progress-spinner/public-api.ts        | 10 ++++++++++
 8 files changed, 64 insertions(+)
 create mode 100644 src/material-experimental/mdc-progress-spinner/BUILD.bazel
 create mode 100644 src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
 create mode 100644 src/material-experimental/mdc-progress-spinner/index.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/module.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/progress-spinner.html
 create mode 100644 src/material-experimental/mdc-progress-spinner/progress-spinner.scss
 create mode 100644 src/material-experimental/mdc-progress-spinner/progress-spinner.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/public-api.ts

diff --git a/src/material-experimental/mdc-progress-spinner/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
new file mode 100644
index 000000000000..dc995ff7754b
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
@@ -0,0 +1,7 @@
+@mixin mat-mdc-progress-spinner-color($config-or-theme) {}
+
+@mixin mat-mdc--progress-spinner-typography($config-or-theme) {}
+
+@mixin _mat-mdc-progress-spinner-density($config-or-theme) {}
+
+@mixin mat-mdc-progress-spinner-theme($theme-or-color-config) {}
diff --git a/src/material-experimental/mdc-progress-spinner/index.ts b/src/material-experimental/mdc-progress-spinner/index.ts
new file mode 100644
index 000000000000..676ca90f1ffa
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';
diff --git a/src/material-experimental/mdc-progress-spinner/module.ts b/src/material-experimental/mdc-progress-spinner/module.ts
new file mode 100644
index 000000000000..dce511c9475a
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/module.ts
@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {MatProgressSpinner} from './progress-spinner';
+
+@NgModule({
+  exports: [MatProgressSpinner, MatCommonModule],
+  declarations: [MatProgressSpinner],
+})
+export class MatProgressSpinnerModule {
+}
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
new file mode 100644
index 000000000000..0bdd23f2468c
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -0,0 +1 @@
+WIP: MDC-based progress spinner
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
new file mode 100644
index 000000000000..14788607e813
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'mat-progress-spinner',
+  exportAs: 'matProgressSpinner',
+  templateUrl: 'progress-spinner.html',
+  styleUrls: ['progress-spinner.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class MatProgressSpinner {}
diff --git a/src/material-experimental/mdc-progress-spinner/public-api.ts b/src/material-experimental/mdc-progress-spinner/public-api.ts
new file mode 100644
index 000000000000..81ca6547facd
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/public-api.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './checkbox';
+export * from './module';

From 2b1eda66c2a4741538d7c0519d9df9bdf3aac30e Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 20 Jul 2020 15:11:46 -0700
Subject: [PATCH 02/18] add demo of mdc-based MatProgressSpinner at
 localhost:4200/mdc-progress-spinner

---
 src/dev-app/BUILD.bazel                       |  1 +
 src/dev-app/dev-app/dev-app-layout.ts         |  1 +
 src/dev-app/dev-app/routes.ts                 |  5 +
 src/dev-app/mdc-progress-spinner/BUILD.bazel  | 21 +++++
 .../mdc-progress-spinner-demo-module.ts       | 21 +++++
 .../mdc-progress-spinner-demo.html            |  1 +
 .../mdc-progress-spinner-demo.scss            |  0
 .../mdc-progress-spinner-demo.ts              | 16 ++++
 .../mdc-progress-spinner/BUILD.bazel          | 92 +++++++++++++++++++
 .../mdc-progress-spinner/public-api.ts        |  2 +-
 10 files changed, 159 insertions(+), 1 deletion(-)
 create mode 100644 src/dev-app/mdc-progress-spinner/BUILD.bazel
 create mode 100644 src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts
 create mode 100644 src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
 create mode 100644 src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
 create mode 100644 src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts

diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 31b817794910..343f40a0323f 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -54,6 +54,7 @@ ng_module(
         "//src/dev-app/mdc-list",
         "//src/dev-app/mdc-menu",
         "//src/dev-app/mdc-progress-bar",
+        "//src/dev-app/mdc-progress-spinner",
         "//src/dev-app/mdc-radio",
         "//src/dev-app/mdc-sidenav",
         "//src/dev-app/mdc-slide-toggle",
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index daf5413d0b9a..7c96d56ec0ef 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -83,6 +83,7 @@ export class DevAppLayout {
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
+    {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'MDC Sidenav', route: '/mdc-sidenav'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts
index 8d0d05679590..89f1d59a161b 100644
--- a/src/dev-app/dev-app/routes.ts
+++ b/src/dev-app/dev-app/routes.ts
@@ -83,6 +83,11 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
   {path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
+  {
+    path: 'mdc-progress-spinner',
+    loadChildren:
+      'mdc-progress-spinner/mdc-progress-spinner-demo-module#MdcProgressSpinnerDemoModule'
+  },
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
   {path: 'mdc-sidenav', loadChildren: 'mdc-sidenav/mdc-sidenav-demo-module#MdcSidenavDemoModule'},
   {
diff --git a/src/dev-app/mdc-progress-spinner/BUILD.bazel b/src/dev-app/mdc-progress-spinner/BUILD.bazel
new file mode 100644
index 000000000000..9546aa8e3c31
--- /dev/null
+++ b/src/dev-app/mdc-progress-spinner/BUILD.bazel
@@ -0,0 +1,21 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-progress-spinner",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-progress-spinner-demo.html",
+        ":mdc_progress_spinner_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-progress-spinner",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_progress_spinner_demo_scss",
+    src = "mdc-progress-spinner-demo.scss",
+)
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts
new file mode 100644
index 000000000000..e5f976c56df5
--- /dev/null
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
+import {RouterModule} from '@angular/router';
+import {MdcProgressSpinnerDemo} from './mdc-progress-spinner-demo';
+
+@NgModule({
+  imports: [
+    MatProgressSpinnerModule,
+    RouterModule.forChild([{path: '', component: MdcProgressSpinnerDemo}]),
+  ],
+  declarations: [MdcProgressSpinnerDemo],
+})
+export class MdcProgressSpinnerDemoModule {}
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
new file mode 100644
index 000000000000..778156fc4fbc
--- /dev/null
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
@@ -0,0 +1 @@
+<mat-progress-spinner></mat-progress-spinner>
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
new file mode 100644
index 000000000000..75997f2e2b3d
--- /dev/null
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'mdc-progress-spinner-demo',
+  templateUrl: 'mdc-progress-spinner-demo.html',
+  styleUrls: ['mdc-progress-spinner-demo.css'],
+})
+export class MdcProgressSpinnerDemo {}
diff --git a/src/material-experimental/mdc-progress-spinner/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
index e69de29bb2d1..752a9592b252 100644
--- a/src/material-experimental/mdc-progress-spinner/BUILD.bazel
+++ b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
@@ -0,0 +1,92 @@
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+load(
+    "//tools:defaults.bzl",
+    "ng_e2e_test_library",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-progress-spinner",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = [":progress_spinner_scss"] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-progress-spinner",
+    deps = [
+        "//src/cdk/bidi",
+        "//src/material/core",
+        "//src/material/progress-spinner",
+        "@npm//@angular/core",
+        "@npm//@material/circular-progress",
+    ],
+)
+
+sass_library(
+    name = "mdc_progress_spinner_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+sass_binary(
+    name = "progress_spinner_scss",
+    src = "progress-spinner.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+ng_test_library(
+    name = "progress_spinner_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":mdc-progress-spinner",
+        "//src/cdk/testing/private",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = [
+        "@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
+    ],
+    deps = [
+        ":progress_spinner_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/private/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/private/e2e",
+    ],
+)
diff --git a/src/material-experimental/mdc-progress-spinner/public-api.ts b/src/material-experimental/mdc-progress-spinner/public-api.ts
index 81ca6547facd..6aa2230d1349 100644
--- a/src/material-experimental/mdc-progress-spinner/public-api.ts
+++ b/src/material-experimental/mdc-progress-spinner/public-api.ts
@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export * from './checkbox';
+export * from './progress-spinner';
 export * from './module';

From d20bb21c4ba3c577af3513f0baf5cc8896f66999 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 20 Jul 2020 15:43:05 -0700
Subject: [PATCH 03/18] copy MDC DOM and add MDC styles

---
 .../_progress-spinner-theme.scss              | 34 ++++++++++++++++---
 .../progress-spinner.html                     | 25 +++++++++++++-
 .../progress-spinner.scss                     |  5 +++
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
index dc995ff7754b..d8384517d8d0 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
+++ b/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);
+    }
+  }
+}
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index 0bdd23f2468c..7980ba27c645 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/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>
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index e69de29bb2d1..a766db4c8717 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/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);

From d1320507e8c70c063826fb0dbda41ac030b43fc0 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 20 Jul 2020 16:22:28 -0700
Subject: [PATCH 04/18] set up MDC foundation for MDC-based MatProgressSpinner

---
 src/material-experimental/config.bzl          |  2 ++
 .../mdc-progress-spinner/progress-spinner.ts  | 25 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
index d94533d7e327..65b7ce391822 100644
--- a/src/material-experimental/config.bzl
+++ b/src/material-experimental/config.bzl
@@ -17,6 +17,8 @@ entryPoints = [
     "mdc-menu/testing",
     "mdc-progress-bar",
     "mdc-progress-bar/testing",
+    "mdc-progress-spinner",
+    "mdc-progress-spinner/testing",
     "mdc-radio",
     "mdc-select",
     "mdc-sidenav",
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 14788607e813..f55f88becc01 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  ViewEncapsulation
+} from '@angular/core';
+import {MDCCircularProgressFoundation} from '@material/circular-progress'
 
 @Component({
   selector: 'mat-progress-spinner',
@@ -16,4 +23,18 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressSpinner {}
+export class MatProgressSpinner implements AfterViewInit, OnDestroy{
+  private _circularProgressFoundation: MDCCircularProgressFoundation;
+
+  constructor() {
+    this._circularProgressFoundation = new MDCCircularProgressFoundation();
+  }
+
+  ngAfterViewInit() {
+    this._circularProgressFoundation.init();
+  }
+
+  ngOnDestroy() {
+    this._circularProgressFoundation.destroy();
+  }
+}

From df558f43f93114f7256680bcc27b9b5c1fa7664a Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 20 Jul 2020 17:57:46 -0700
Subject: [PATCH 05/18] (wip) add adapter and fill in API

---
 .../mdc-progress-spinner/progress-spinner.ts  | 142 ++++++++++++++++--
 1 file changed, 133 insertions(+), 9 deletions(-)

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index f55f88becc01..60cba4389f32 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -9,32 +9,156 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
+  Component, ElementRef, Inject, InjectionToken,
+  Input, NgZone,
+  OnDestroy, Optional,
   ViewEncapsulation
 } from '@angular/core';
-import {MDCCircularProgressFoundation} from '@material/circular-progress'
+import {
+  MDCCircularProgressAdapter,
+  MDCCircularProgressFoundation
+} from '@material/circular-progress';
+import {CanColor, CanColorCtor, mixinColor} from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {
+  MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
+  MatProgressSpinnerDefaultOptions
+} from '@angular/material/progress-spinner';
+import {coerceNumberProperty} from '@angular/cdk/coercion';
+
+// Boilerplate for applying mixins to MatProgressBar.
+/** @docs-private */
+class MatProgressSpinnerBase {
+  constructor(public _elementRef: ElementRef) { }
+}
+
+const _MatProgressSpinnerMixinBase: CanColorCtor & typeof MatProgressSpinnerBase =
+  mixinColor(MatProgressSpinnerBase, 'primary');
+
+/**
+ * Base reference size of the spinner.
+ * @docs-private
+ */
+
+export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
+
+const BASE_SIZE = 100;
 
 @Component({
   selector: 'mat-progress-spinner',
   exportAs: 'matProgressSpinner',
+  host: {
+    'role': 'progressbar',
+    'class': 'mat-progress-spinner',
+    '[class._mat-animation-noopable]': `_noopAnimations`,
+    '[style.width.px]': 'diameter',
+    '[style.height.px]': 'diameter',
+    '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
+    '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
+    '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
+    '[attr.mode]': 'mode',
+  },
+  inputs: ['color'],
   templateUrl: 'progress-spinner.html',
   styleUrls: ['progress-spinner.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressSpinner implements AfterViewInit, OnDestroy{
-  private _circularProgressFoundation: MDCCircularProgressFoundation;
+export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit, OnDestroy, CanColor {
+  /** Implements all of the logic of the MDC circular progress. */
+  private _foundation: MDCCircularProgressFoundation | undefined;
+
+  /** Adapter used by MDC to interact with the DOM. */
+  private _adapter: MDCCircularProgressAdapter = {
+    addClass: (className: string) => this._rootElement.classList.add(className),
+    hasClass: (className: string) => this._rootElement.classList.contains(className),
+    removeClass: (className: string) => this._rootElement.classList.remove(className),
+    removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
+    setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
+    getDeterminateCircleAttribute: (attributeName: string) => this._determinateCircle.getAttribute(
+      attributeName),
+    setDeterminateCircleAttribute: (attributeName: string,
+                                    value: string) => this._determinateCircle.setAttribute(
+      attributeName,
+      value),
+  };
 
-  constructor() {
-    this._circularProgressFoundation = new MDCCircularProgressFoundation();
+  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
+  _noopAnimations: boolean;
+
+  private _rootElement: HTMLElement;
+  private _determinateCircle: HTMLElement;
+
+  constructor(public _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
+              @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
+                defaults?: MatProgressSpinnerDefaultOptions) {
+    super(_elementRef);
+    this._noopAnimations = animationMode === 'NoopAnimations' &&
+      (!!defaults && !defaults._forceAnimations);
   }
 
+  /**
+   * Mode of the progress bar.
+   *
+   * Input must be one of these values: determinate, indeterminate, buffer, query, defaults to
+   * 'determinate'.
+   * Mirrored to mode attribute.
+   */
+  @Input()
+  get mode(): ProgressSpinnerMode {
+    return this._mode;
+  }
+
+  set mode(value: ProgressSpinnerMode) {
+    // Note that we don't technically need a getter and a setter here,
+    // but we use it to match the behavior of the existing mat-progress-bar.
+    this._mode = value;
+    this._syncFoundation();
+  }
+  private _mode: ProgressSpinnerMode = 'determinate';
+
+
+  /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
+  @Input()
+  get value(): number {
+    return this.mode === 'determinate' ? this._value : 0;
+  }
+
+  set value(v: number) {
+    this._value = Math.max(0, Math.min(100, coerceNumberProperty(v)));
+    this._syncFoundation();
+  }
+  private _value = 0;
+
+  /** The diameter of the progress spinner (will set width and height of svg). */
+  @Input()
+  get diameter(): number { return this._diameter; }
+  set diameter(size: number) {
+    this._diameter = size;
+    this._syncFoundation();
+  }
+  private _diameter = BASE_SIZE;
+
   ngAfterViewInit() {
-    this._circularProgressFoundation.init();
+    this._foundation = new MDCCircularProgressFoundation(this._adapter);
+    this._foundation.init();
+    this._syncFoundation();
   }
 
   ngOnDestroy() {
-    this._circularProgressFoundation.destroy();
+    if (this._foundation) {
+      this._foundation.destroy();
+    }
+  }
+
+  private _syncFoundation() {
+    const foundation = this._foundation;
+
+    if (foundation) {
+      const mode = this.mode;
+      foundation.setDeterminate(mode === 'determinate');
+      foundation.setProgress(this.value / 100);
+    }
   }
 }

From db782b1a3aa47bf71e1c3a2d51cede5a23410577 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 20 Jul 2020 20:35:47 -0700
Subject: [PATCH 06/18] copy over existing demo to MDC-based demo

---
 rollup-globals.bzl                            |   1 +
 src/dev-app/BUILD.bazel                       |   1 +
 src/dev-app/mdc-progress-spinner/BUILD.bazel  |   4 +
 .../mdc-progress-spinner-demo-module.ts       |   8 +
 .../mdc-progress-spinner-demo.html            |  33 +++-
 .../mdc-progress-spinner-demo.scss            |  13 ++
 .../mdc-progress-spinner-demo.ts              |  12 +-
 .../_progress-spinner-theme.scss              |  18 ++-
 .../mdc-progress-spinner/module.ts            |   6 +-
 .../progress-spinner.html                     |  51 ++++--
 .../progress-spinner.scss                     |  18 +++
 .../mdc-progress-spinner/progress-spinner.ts  | 146 +++++++++++++++---
 .../mdc-theming/_all-theme.scss               |   2 +
 .../mdc_require_config.js                     |   1 +
 tools/system-config-tmpl.js                   |   1 +
 15 files changed, 273 insertions(+), 42 deletions(-)

diff --git a/rollup-globals.bzl b/rollup-globals.bzl
index 71cd302e5584..ca76ac87d5be 100644
--- a/rollup-globals.bzl
+++ b/rollup-globals.bzl
@@ -41,6 +41,7 @@ ROLLUP_GLOBALS = {
     "@material/auto-init": "mdc.autoInit",
     "@material/base": "mdc.base",
     "@material/checkbox": "mdc.checkbox",
+    "@material/circular-progress": "mdc.circularProgress",
     "@material/chips": "mdc.chips",
     "@material/dialog": "mdc.dialog",
     "@material/dom": "mdc.dom",
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 343f40a0323f..52c3217bb4a5 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -131,6 +131,7 @@ filegroup(
         "@npm//:node_modules/@material/base/dist/mdc.base.js",
         "@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
         "@npm//:node_modules/@material/chips/dist/mdc.chips.js",
+        "@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
         "@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
         "@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
         "@npm//:node_modules/@material/dom/dist/mdc.dom.js",
diff --git a/src/dev-app/mdc-progress-spinner/BUILD.bazel b/src/dev-app/mdc-progress-spinner/BUILD.bazel
index 9546aa8e3c31..5504780cdae4 100644
--- a/src/dev-app/mdc-progress-spinner/BUILD.bazel
+++ b/src/dev-app/mdc-progress-spinner/BUILD.bazel
@@ -12,6 +12,10 @@ ng_module(
     deps = [
         "//src/material-experimental/mdc-progress-spinner",
         "@npm//@angular/router",
+        "//src/material/button",
+        "//src/material/button-toggle",
+        "//src/material/checkbox",
+        "@npm//@angular/forms",
     ],
 )
 
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts
index e5f976c56df5..351381e161a0 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts
@@ -10,9 +10,17 @@ import {NgModule} from '@angular/core';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 import {RouterModule} from '@angular/router';
 import {MdcProgressSpinnerDemo} from './mdc-progress-spinner-demo';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   imports: [
+    MatButtonModule,
+    MatCheckboxModule,
+    MatButtonToggleModule,
+    FormsModule,
     MatProgressSpinnerModule,
     RouterModule.forChild([{path: '', component: MdcProgressSpinnerDemo}]),
   ],
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
index 778156fc4fbc..9d2f05fc1f53 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.html
@@ -1 +1,32 @@
-<mat-progress-spinner></mat-progress-spinner>
+<h1>Determinate</h1>
+
+<div class="demo-progress-spinner-controls">
+  <p>Value: {{progressValue}}</p>
+  <button mat-raised-button (click)="step(10)">Increase</button>
+  <button mat-raised-button (click)="step(-10)">Decrease</button>
+  <mat-checkbox [(ngModel)]="isDeterminate">Is determinate</mat-checkbox>
+</div>
+
+<div class="demo-progress-spinner">
+  <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
+                        [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
+  <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
+                        [value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
+  <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
+                        [value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
+</div>
+
+<h1>Indeterminate</h1>
+
+<mat-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
+  <mat-button-toggle value="primary">Primary Color</mat-button-toggle>
+  <mat-button-toggle value="accent">Accent Color</mat-button-toggle>
+  <mat-button-toggle value="warn">Warn Color</mat-button-toggle>
+</mat-button-toggle-group>
+
+<div class="demo-progress-spinner">
+  <mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
+  <mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
+  <mat-spinner [color]="color"></mat-spinner>
+</div>
+
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
index e69de29bb2d1..0fe3686c5789 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
@@ -0,0 +1,13 @@
+.demo-progress-spinner {
+  width: 100%;
+
+  .mat-mdc-progress-spinner,
+  .mat-mdc-spinner {
+    display: inline-block;
+  }
+
+}
+
+.demo-progress-spinner-controls {
+  margin: 10px 0;
+}
diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
index 75997f2e2b3d..e5177f137285 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.ts
@@ -7,10 +7,20 @@
  */
 
 import {Component} from '@angular/core';
+import {ThemePalette} from '@angular/material/core';
+
 
 @Component({
   selector: 'mdc-progress-spinner-demo',
   templateUrl: 'mdc-progress-spinner-demo.html',
   styleUrls: ['mdc-progress-spinner-demo.css'],
 })
-export class MdcProgressSpinnerDemo {}
+export class MdcProgressSpinnerDemo {
+  progressValue = 60;
+  color: ThemePalette = 'primary';
+  isDeterminate = true;
+
+  step(val: number) {
+    this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
+  }
+}
diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
index d8384517d8d0..53299175d91b 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
@@ -1,11 +1,25 @@
-@import '@material/linear-progress/mixins.import';
+@import '@material/circular-progress/mixins.import';
 @import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
+@mixin _mat-mdc-progress-spinner-color($color) {
+  @include mdc-circular-progress-color($color, $query: $mat-theme-styles-query);
+}
+
 @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);
+    .mat-mdc-progress-spinner {
+      @include _mat-mdc-progress-spinner-color(primary);
+
+      &.mat-accent {
+        @include _mat-mdc-progress-spinner-color(secondary);
+      }
+
+      &.mat-warn {
+        @include _mat-mdc-progress-spinner-color(error);
+      }
+    }
   }
 }
 
diff --git a/src/material-experimental/mdc-progress-spinner/module.ts b/src/material-experimental/mdc-progress-spinner/module.ts
index dce511c9475a..68c8d30496ad 100644
--- a/src/material-experimental/mdc-progress-spinner/module.ts
+++ b/src/material-experimental/mdc-progress-spinner/module.ts
@@ -8,11 +8,11 @@
 
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
-import {MatProgressSpinner} from './progress-spinner';
+import {MatProgressSpinner, MatSpinner} from './progress-spinner';
 
 @NgModule({
-  exports: [MatProgressSpinner, MatCommonModule],
-  declarations: [MatProgressSpinner],
+  exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
+  declarations: [MatProgressSpinner, MatSpinner],
 })
 export class MatProgressSpinnerModule {
 }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index 7980ba27c645..08ac8ad93ae6 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -1,24 +1,47 @@
-<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" role="progressbar">
   <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 [attr.viewBox]="_viewBox" class="mdc-circular-progress__determinate-circle-graphic"
+         xmlns="http://www.w3.org/2000/svg">
+      <circle [attr.r]="_circleRadius"
+              [style.stroke-dasharray.px]="_strokeCircumference"
+              [style.stroke-dashoffset.px]="_strokeDashOffset"
+              [style.stroke-width.%]="_circleStrokeWidth"
+              class="mdc-circular-progress__determinate-circle"
+              cx="50%" cy="50%"/>
     </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 [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
+             xmlns="http://www.w3.org/2000/svg">
+          <circle [attr.r]="_circleRadius"
+                  [style.stroke-dasharray.px]="_strokeCircumference"
+                  [style.stroke-dashoffset.px]="_strokeCircumference/2"
+                  [style.stroke-width.%]="_circleStrokeWidth"
+                  cx="50%" cy="50%"/>
         </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 class="mdc-circular-progress__gap-patch">
+        <svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
+             xmlns="http://www.w3.org/2000/svg">
+          <circle [attr.r]="_circleRadius"
+                  [style.stroke-dasharray.px]="_strokeCircumference"
+                  [style.stroke-dashoffset.px]="_strokeCircumference/2"
+                  [style.stroke-width.%]="_circleStrokeWidth"
+                  cx="50%" cy="50%"/>
+        </svg>
+      </div>
+      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
+        <svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
+             xmlns="http://www.w3.org/2000/svg">
+          <circle [attr.r]="_circleRadius"
+                  [style.stroke-dasharray.px]="_strokeCircumference"
+                  [style.stroke-dashoffset.px]="_strokeCircumference/2"
+                  [style.stroke-width.%]="_circleStrokeWidth"
+                  cx="50%" cy="50%"/>
+        </svg>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index a766db4c8717..071858c229b6 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -3,3 +3,21 @@
 
 
 @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
+
+.mdc-circular-progress {
+  width: 100%;
+  height: 100%;
+}
+
+.mat-mdc-progress-spinner {
+  display: block;
+
+  .mdc-circular-progress--indeterminate {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:not(._mat-animation-noopable) {
+    @include mdc-circular-progress-core-styles($query: animation);
+  }
+}
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 60cba4389f32..1fdcbb540617 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -9,9 +9,12 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
-  Component, ElementRef, Inject, InjectionToken,
-  Input, NgZone,
-  OnDestroy, Optional,
+  Component,
+  ElementRef,
+  Inject,
+  Input,
+  OnDestroy,
+  Optional,
   ViewEncapsulation
 } from '@angular/core';
 import {
@@ -29,27 +32,34 @@ import {coerceNumberProperty} from '@angular/cdk/coercion';
 // Boilerplate for applying mixins to MatProgressBar.
 /** @docs-private */
 class MatProgressSpinnerBase {
-  constructor(public _elementRef: ElementRef) { }
+  constructor(public _elementRef: ElementRef) {
+  }
 }
 
 const _MatProgressSpinnerMixinBase: CanColorCtor & typeof MatProgressSpinnerBase =
   mixinColor(MatProgressSpinnerBase, 'primary');
 
+/** Possible mode for a progress spinner. */
+export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
+
 /**
  * Base reference size of the spinner.
  * @docs-private
  */
-
-export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
-
 const BASE_SIZE = 100;
 
+/**
+ * Base reference stroke width of the spinner.
+ * @docs-private
+ */
+const BASE_STROKE_WIDTH = 10;
+
 @Component({
   selector: 'mat-progress-spinner',
   exportAs: 'matProgressSpinner',
   host: {
     'role': 'progressbar',
-    'class': 'mat-progress-spinner',
+    'class': 'mat-mdc-progress-spinner',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
@@ -64,10 +74,15 @@ const BASE_SIZE = 100;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit, OnDestroy, CanColor {
+export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit,
+  OnDestroy,
+  CanColor {
+  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
+  _noopAnimations: boolean;
   /** Implements all of the logic of the MDC circular progress. */
   private _foundation: MDCCircularProgressFoundation | undefined;
-
+  private _rootElement: HTMLElement;
+  private _determinateCircle: HTMLElement;
   /** Adapter used by MDC to interact with the DOM. */
   private _adapter: MDCCircularProgressAdapter = {
     addClass: (className: string) => this._rootElement.classList.add(className),
@@ -83,21 +98,27 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
       value),
   };
 
-  /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
-  _noopAnimations: boolean;
-
-  private _rootElement: HTMLElement;
-  private _determinateCircle: HTMLElement;
-
-  constructor(public _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone,
+  constructor(public _elementRef: ElementRef<HTMLElement>,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
               @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
                 defaults?: MatProgressSpinnerDefaultOptions) {
     super(_elementRef);
     this._noopAnimations = animationMode === 'NoopAnimations' &&
       (!!defaults && !defaults._forceAnimations);
+
+    if (defaults) {
+      if (defaults.diameter) {
+        this.diameter = defaults.diameter;
+      }
+
+      if (defaults.strokeWidth) {
+        this.strokeWidth = defaults.strokeWidth;
+      }
+    }
   }
 
+  private _mode: ProgressSpinnerMode = 'determinate';
+
   /**
    * Mode of the progress bar.
    *
@@ -116,8 +137,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     this._mode = value;
     this._syncFoundation();
   }
-  private _mode: ProgressSpinnerMode = 'determinate';
 
+  private _value = 0;
 
   /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
@@ -129,18 +150,69 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     this._value = Math.max(0, Math.min(100, coerceNumberProperty(v)));
     this._syncFoundation();
   }
-  private _value = 0;
+
+  private _diameter = BASE_SIZE;
 
   /** The diameter of the progress spinner (will set width and height of svg). */
   @Input()
-  get diameter(): number { return this._diameter; }
+  get diameter(): number {
+    return this._diameter;
+  }
+
   set diameter(size: number) {
     this._diameter = size;
     this._syncFoundation();
   }
-  private _diameter = BASE_SIZE;
+
+  private _strokeWidth: number;
+
+  /** Stroke width of the progress spinner. */
+  @Input()
+  get strokeWidth(): number {
+    return this._strokeWidth || this.diameter / 10;
+  }
+
+  set strokeWidth(value: number) {
+    this._strokeWidth = coerceNumberProperty(value);
+  }
+
+  /** The radius of the spinner, adjusted for stroke width. */
+  get _circleRadius() {
+    return (this.diameter - BASE_STROKE_WIDTH) / 2;
+  }
+
+  /** The view box of the spinner's svg element. */
+  get _viewBox() {
+    const viewBox = this._circleRadius * 2 + this.strokeWidth;
+    return `0 0 ${viewBox} ${viewBox}`;
+  }
+
+  /** The stroke circumference of the svg circle. */
+  get _strokeCircumference(): number {
+    return 2 * Math.PI * this._circleRadius;
+  }
+
+  /** The dash offset of the svg circle. */
+  get _strokeDashOffset() {
+    if (this.mode === 'determinate') {
+      return this._strokeCircumference * (100 - this._value) / 100;
+    }
+
+    return null;
+  }
+
+  /** Stroke width of the circle in percent. */
+  get _circleStrokeWidth() {
+    return this.strokeWidth / this.diameter * 100;
+  }
 
   ngAfterViewInit() {
+    const element = this._elementRef.nativeElement;
+
+    this._rootElement = element.querySelector('.mdc-circular-progress') as HTMLElement;
+    this._determinateCircle =
+      element.querySelector('.mdc-circular-progress__determinate-container') as HTMLElement;
+
     this._foundation = new MDCCircularProgressFoundation(this._adapter);
     this._foundation.init();
     this._syncFoundation();
@@ -162,3 +234,35 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     }
   }
 }
+
+/**
+ * `<mat-spinner>` component.
+ *
+ * This is a component definition to be used as a convenience reference to create an
+ * indeterminate `<mat-progress-spinner>` instance.
+ */
+@Component({
+  selector: 'mat-spinner',
+  host: {
+    'role': 'progressbar',
+    'mode': 'indeterminate',
+    'class': 'mat-mdc-spinner mat-mdc-progress-spinner',
+    '[class._mat-animation-noopable]': `_noopAnimations`,
+    '[style.width.px]': 'diameter',
+    '[style.height.px]': 'diameter',
+  },
+  inputs: ['color'],
+  templateUrl: 'progress-spinner.html',
+  styleUrls: ['progress-spinner.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class MatSpinner extends MatProgressSpinner {
+  constructor(elementRef: ElementRef<HTMLElement>,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
+              @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
+                defaults?: MatProgressSpinnerDefaultOptions) {
+    super(elementRef, animationMode, defaults);
+    this.mode = 'indeterminate';
+  }
+}
diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss
index 673c3b7f22d5..bccb0c356a55 100644
--- a/src/material-experimental/mdc-theming/_all-theme.scss
+++ b/src/material-experimental/mdc-theming/_all-theme.scss
@@ -10,6 +10,7 @@
 @import '../mdc-tabs/tabs-theme';
 @import '../mdc-table/table-theme';
 @import '../mdc-progress-bar/progress-bar-theme';
+@import '../mdc-progress-spinner/progress-spinner-theme';
 @import '../mdc-input/input-theme';
 @import '../mdc-form-field/form-field-theme';
 @import '../../material/core/theming/check-duplicate-styles';
@@ -25,6 +26,7 @@
     @include mat-mdc-list-theme($theme-or-color-config);
     @include mat-mdc-menu-theme($theme-or-color-config);
     @include mat-mdc-progress-bar-theme($theme-or-color-config);
+    @include mat-mdc-progress-spinner-theme($theme-or-color-config);
     @include mat-mdc-radio-theme($theme-or-color-config);
     @include mat-mdc-slide-toggle-theme($theme-or-color-config);
     @include mat-mdc-snack-bar-theme($theme-or-color-config);
diff --git a/src/material-experimental/mdc_require_config.js b/src/material-experimental/mdc_require_config.js
index bff597ceb6a1..f86b99b8cef0 100644
--- a/src/material-experimental/mdc_require_config.js
+++ b/src/material-experimental/mdc_require_config.js
@@ -7,6 +7,7 @@ require.config({
     '@material/base': '/base/npm/node_modules/@material/base/dist/mdc.base',
     '@material/checkbox': '/base/npm/node_modules/@material/checkbox/dist/mdc.checkbox',
     '@material/chips': '/base/npm/node_modules/@material/chips/dist/mdc.chips',
+    '@material/circular-progress': '/base/npm/node_modules/@material/circular-progress/dist/mdc.circularProgress',
     '@material/dialog': '/base/npm/node_modules/@material/dialog/dist/mdc.dialog',
     '@material/dom': '/base/npm/node_modules/@material/dom/dist/mdc.dom',
     '@material/drawer': '/base/npm/node_modules/@material/drawer/dist/mdc.drawer',
diff --git a/tools/system-config-tmpl.js b/tools/system-config-tmpl.js
index 6e8cdae10997..ca531ffe7962 100644
--- a/tools/system-config-tmpl.js
+++ b/tools/system-config-tmpl.js
@@ -42,6 +42,7 @@ var pathMapping = {
   '@material/base': 'node:@material/base/dist/mdc.base.js',
   '@material/checkbox': 'node:@material/checkbox/dist/mdc.checkbox.js',
   '@material/chips': 'node:@material/chips/dist/mdc.chips.js',
+  '@material/circular-progress': 'node:@material/circular-progress/dist/mdc.circularProgress.js',
   '@material/dialog': 'node:@material/dialog/dist/mdc.dialog.js',
   '@material/dom': 'node:@material/dom/dist/mdc.dom.js',
   '@material/drawer': 'node:@material/drawer/dist/mdc.drawer.js',

From cd8c83558f5adb68c43deeaa1e62797b26e96892 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Thu, 23 Jul 2020 13:38:34 -0700
Subject: [PATCH 07/18] serverside rendering, refactor

---
 .../mdc-progress-spinner-demo.scss            |  1 -
 .../mdc-progress-spinner/BUILD.bazel          |  9 ++-
 .../_progress-spinner-theme.scss              |  1 -
 .../mdc-progress-spinner/module.ts            |  4 ++
 .../progress-spinner.html                     | 52 ++++++--------
 .../progress-spinner.scss                     |  7 +-
 .../mdc-progress-spinner/progress-spinner.ts  | 68 +++++++++----------
 .../kitchen-sink-mdc/kitchen-sink-mdc.html    |  6 ++
 .../kitchen-sink-mdc/kitchen-sink-mdc.ts      |  2 +
 9 files changed, 71 insertions(+), 79 deletions(-)

diff --git a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
index 0fe3686c5789..d0dec7c4d5ab 100644
--- a/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
+++ b/src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss
@@ -5,7 +5,6 @@
   .mat-mdc-spinner {
     display: inline-block;
   }
-
 }
 
 .demo-progress-spinner-controls {
diff --git a/src/material-experimental/mdc-progress-spinner/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
index 752a9592b252..18700b083103 100644
--- a/src/material-experimental/mdc-progress-spinner/BUILD.bazel
+++ b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
@@ -22,9 +22,10 @@ ng_module(
     assets = [":progress_spinner_scss"] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-progress-spinner",
     deps = [
-        "//src/cdk/bidi",
+        "//src/cdk/platform",
         "//src/material/core",
         "//src/material/progress-spinner",
+        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@material/circular-progress",
     ],
@@ -59,8 +60,10 @@ ng_test_library(
     ),
     deps = [
         ":mdc-progress-spinner",
-        "//src/cdk/testing/private",
-        "@npm//@angular/platform-browser",
+         "//src/cdk/platform",
+         "//src/material/progress-spinner",
+         "@npm//@angular/common",
+         "@npm//@angular/platform-browser",
     ],
 )
 
diff --git a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
index 53299175d91b..8dd80b3b71a4 100644
--- a/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
+++ b/src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss
@@ -1,5 +1,4 @@
 @import '@material/circular-progress/mixins.import';
-@import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin _mat-mdc-progress-spinner-color($color) {
diff --git a/src/material-experimental/mdc-progress-spinner/module.ts b/src/material-experimental/mdc-progress-spinner/module.ts
index 68c8d30496ad..03223c2ca729 100644
--- a/src/material-experimental/mdc-progress-spinner/module.ts
+++ b/src/material-experimental/mdc-progress-spinner/module.ts
@@ -9,10 +9,14 @@
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {MatProgressSpinner, MatSpinner} from './progress-spinner';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
   exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
   declarations: [MatProgressSpinner, MatSpinner],
+  imports: [
+    CommonModule
+  ]
 })
 export class MatProgressSpinnerModule {
 }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index 08ac8ad93ae6..a640cec1bddc 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -1,11 +1,22 @@
-<div class="mdc-circular-progress" role="progressbar">
-  <div class="mdc-circular-progress__determinate-container">
-    <svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__determinate-circle-graphic"
+<ng-template #circle>
+  <svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__indeterminate-circle-graphic"
+       xmlns="http://www.w3.org/2000/svg">
+    <circle [attr.r]="_circleRadius()"
+            [style.stroke-dasharray.px]="_strokeCircumference()"
+            [style.stroke-dashoffset.px]="_strokeCircumference()/2"
+            [style.stroke-width.%]="_circleStrokeWidth()"
+            cx="50%" cy="50%"/>
+  </svg>
+</ng-template>
+
+<div class="mdc-circular-progress" role="progressbar" #spinnerRoot>
+  <div class="mdc-circular-progress__determinate-container" #determinateSpinner>
+    <svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
          xmlns="http://www.w3.org/2000/svg">
-      <circle [attr.r]="_circleRadius"
-              [style.stroke-dasharray.px]="_strokeCircumference"
-              [style.stroke-dashoffset.px]="_strokeDashOffset"
-              [style.stroke-width.%]="_circleStrokeWidth"
+      <circle [attr.r]="_circleRadius()"
+              [style.stroke-dasharray.px]="_strokeCircumference()"
+              [style.stroke-dashoffset.px]="_strokeDashOffset()"
+              [style.stroke-width.%]="_circleStrokeWidth()"
               class="mdc-circular-progress__determinate-circle"
               cx="50%" cy="50%"/>
     </svg>
@@ -13,34 +24,13 @@
   <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 [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
-             xmlns="http://www.w3.org/2000/svg">
-          <circle [attr.r]="_circleRadius"
-                  [style.stroke-dasharray.px]="_strokeCircumference"
-                  [style.stroke-dashoffset.px]="_strokeCircumference/2"
-                  [style.stroke-width.%]="_circleStrokeWidth"
-                  cx="50%" cy="50%"/>
-        </svg>
+        <ng-container [ngTemplateOutlet]="circle"></ng-container>
       </div>
       <div class="mdc-circular-progress__gap-patch">
-        <svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
-             xmlns="http://www.w3.org/2000/svg">
-          <circle [attr.r]="_circleRadius"
-                  [style.stroke-dasharray.px]="_strokeCircumference"
-                  [style.stroke-dashoffset.px]="_strokeCircumference/2"
-                  [style.stroke-width.%]="_circleStrokeWidth"
-                  cx="50%" cy="50%"/>
-        </svg>
+        <ng-container [ngTemplateOutlet]="circle"></ng-container>
       </div>
       <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
-        <svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
-             xmlns="http://www.w3.org/2000/svg">
-          <circle [attr.r]="_circleRadius"
-                  [style.stroke-dasharray.px]="_strokeCircumference"
-                  [style.stroke-dashoffset.px]="_strokeCircumference/2"
-                  [style.stroke-width.%]="_circleStrokeWidth"
-                  cx="50%" cy="50%"/>
-        </svg>
+        <ng-container [ngTemplateOutlet]="circle"></ng-container>
       </div>
     </div>
   </div>
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 071858c229b6..40e045e74e2d 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -4,15 +4,10 @@
 
 @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
 
-.mdc-circular-progress {
-  width: 100%;
-  height: 100%;
-}
-
 .mat-mdc-progress-spinner {
   display: block;
 
-  .mdc-circular-progress--indeterminate {
+  .mdc-circular-progress {
     width: 100%;
     height: 100%;
   }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 1fdcbb540617..4eed70da188a 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -15,6 +15,7 @@ import {
   Input,
   OnDestroy,
   Optional,
+  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import {
@@ -27,10 +28,9 @@ import {
   MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
   MatProgressSpinnerDefaultOptions
 } from '@angular/material/progress-spinner';
-import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
 
 // Boilerplate for applying mixins to MatProgressBar.
-/** @docs-private */
 class MatProgressSpinnerBase {
   constructor(public _elementRef: ElementRef) {
   }
@@ -44,16 +44,15 @@ export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
 
 /**
  * Base reference size of the spinner.
- * @docs-private
  */
 const BASE_SIZE = 100;
 
 /**
  * Base reference stroke width of the spinner.
- * @docs-private
  */
 const BASE_STROKE_WIDTH = 10;
 
+
 @Component({
   selector: 'mat-progress-spinner',
   exportAs: 'matProgressSpinner',
@@ -77,27 +76,29 @@ const BASE_STROKE_WIDTH = 10;
 export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit,
   OnDestroy,
   CanColor {
+  static ngAcceptInputType_diameter: NumberInput;
+  static ngAcceptInputType_strokeWidth: NumberInput;
+  static ngAcceptInputType_value: NumberInput;
+
   /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
   _noopAnimations: boolean;
   /** Implements all of the logic of the MDC circular progress. */
-  private _foundation: MDCCircularProgressFoundation | undefined;
-  private _rootElement: HTMLElement;
-  private _determinateCircle: HTMLElement;
-  /** Adapter used by MDC to interact with the DOM. */
+  _foundation: MDCCircularProgressFoundation;
+  @ViewChild('spinnerRoot') _rootElement: ElementRef<HTMLElement>;
+  @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
+
   private _adapter: MDCCircularProgressAdapter = {
-    addClass: (className: string) => this._rootElement.classList.add(className),
-    hasClass: (className: string) => this._rootElement.classList.contains(className),
-    removeClass: (className: string) => this._rootElement.classList.remove(className),
-    removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
-    setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
-    getDeterminateCircleAttribute: (attributeName: string) => this._determinateCircle.getAttribute(
-      attributeName),
-    setDeterminateCircleAttribute: (attributeName: string,
-                                    value: string) => this._determinateCircle.setAttribute(
-      attributeName,
-      value),
+    addClass: (className: string) => this._rootElement.nativeElement.classList.add(className),
+    hasClass: (className: string) => this._rootElement.nativeElement.classList.contains(className),
+    removeClass: (className: string) => this._rootElement.nativeElement.classList.remove(className),
+    removeAttribute: (name: string) => this._rootElement.nativeElement.removeAttribute(name),
+    setAttribute: (name: string, value: string) =>
+      this._rootElement.nativeElement.setAttribute(name, value),
+    getDeterminateCircleAttribute: (attributeName: string) =>
+      this._determinateCircle.nativeElement.getAttribute(attributeName),
+    setDeterminateCircleAttribute: (attributeName: string, value: string) =>
+      this._determinateCircle.nativeElement.setAttribute(attributeName, value),
   };
-
   constructor(public _elementRef: ElementRef<HTMLElement>,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
               @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
@@ -160,7 +161,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   }
 
   set diameter(size: number) {
-    this._diameter = size;
+    this._diameter = coerceNumberProperty(size);
     this._syncFoundation();
   }
 
@@ -169,7 +170,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   /** Stroke width of the progress spinner. */
   @Input()
   get strokeWidth(): number {
-    return this._strokeWidth || this.diameter / 10;
+    return this._strokeWidth ?? this.diameter / 10;
   }
 
   set strokeWidth(value: number) {
@@ -177,42 +178,35 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   }
 
   /** The radius of the spinner, adjusted for stroke width. */
-  get _circleRadius() {
+  _circleRadius(): number {
     return (this.diameter - BASE_STROKE_WIDTH) / 2;
   }
 
   /** The view box of the spinner's svg element. */
-  get _viewBox() {
-    const viewBox = this._circleRadius * 2 + this.strokeWidth;
+  _viewBox() {
+    const viewBox = this._circleRadius() * 2 + this.strokeWidth;
     return `0 0 ${viewBox} ${viewBox}`;
   }
 
   /** The stroke circumference of the svg circle. */
-  get _strokeCircumference(): number {
-    return 2 * Math.PI * this._circleRadius;
+  _strokeCircumference(): number {
+    return 2 * Math.PI * this._circleRadius();
   }
 
   /** The dash offset of the svg circle. */
-  get _strokeDashOffset() {
+  _strokeDashOffset() {
     if (this.mode === 'determinate') {
-      return this._strokeCircumference * (100 - this._value) / 100;
+      return this._strokeCircumference() * (100 - this._value) / 100;
     }
-
     return null;
   }
 
   /** Stroke width of the circle in percent. */
-  get _circleStrokeWidth() {
+  _circleStrokeWidth() {
     return this.strokeWidth / this.diameter * 100;
   }
 
   ngAfterViewInit() {
-    const element = this._elementRef.nativeElement;
-
-    this._rootElement = element.querySelector('.mdc-circular-progress') as HTMLElement;
-    this._determinateCircle =
-      element.querySelector('.mdc-circular-progress__determinate-container') as HTMLElement;
-
     this._foundation = new MDCCircularProgressFoundation(this._adapter);
     this._foundation.init();
     this._syncFoundation();
diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
index 9af4d662b63b..42abd2cfd384 100644
--- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
+++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html
@@ -195,3 +195,9 @@ <h3>Prefix and Suffix</h3>
   <mat-label>Name</mat-label>
   <input matInput>
 </mat-form-field>
+
+<h2>MDC Progress spinner</h2>
+<mat-progress-spinner [value]="25"></mat-progress-spinner>
+<mat-spinner></mat-spinner>
+<mat-progress-spinner mode="indeterminate" [diameter]="37"></mat-progress-spinner>
+<mat-spinner [strokeWidth]="4"></mat-spinner>
diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts
index 7c3273c7e847..c36edb3b970b 100644
--- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts
+++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts
@@ -14,6 +14,7 @@ import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
 import {MatTableModule} from '@angular/material-experimental/mdc-table';
 import {MatIconModule} from '@angular/material/icon';
 import {MatSnackBarModule, MatSnackBar} from '@angular/material-experimental/mdc-snack-bar';
+import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
 
 @Component({
   selector: 'kitchen-sink-mdc',
@@ -39,6 +40,7 @@ export class KitchenSinkMdc {
     MatTableModule,
     MatProgressBarModule,
     MatSnackBarModule,
+    MatProgressSpinnerModule,
   ],
   declarations: [KitchenSinkMdc],
   exports: [KitchenSinkMdc],

From e821045acd857cfe18c61d59d2aa238b648acdff Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Thu, 23 Jul 2020 17:02:03 -0700
Subject: [PATCH 08/18] add tests (adapter class wip)

---
 .../progress-spinner.html                     |   4 +-
 .../progress-spinner.spec.ts                  | 385 ++++++++++++++++++
 .../mdc-progress-spinner/progress-spinner.ts  |  44 +-
 3 files changed, 428 insertions(+), 5 deletions(-)
 create mode 100644 src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index a640cec1bddc..ab1b12fabbd8 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -1,6 +1,6 @@
 <ng-template #circle>
   <svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__indeterminate-circle-graphic"
-       xmlns="http://www.w3.org/2000/svg">
+       xmlns="http://www.w3.org/2000/svg" focusable="false">
     <circle [attr.r]="_circleRadius()"
             [style.stroke-dasharray.px]="_strokeCircumference()"
             [style.stroke-dashoffset.px]="_strokeCircumference()/2"
@@ -12,7 +12,7 @@
 <div class="mdc-circular-progress" role="progressbar" #spinnerRoot>
   <div class="mdc-circular-progress__determinate-container" #determinateSpinner>
     <svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
-         xmlns="http://www.w3.org/2000/svg">
+         xmlns="http://www.w3.org/2000/svg" focusable="false">
       <circle [attr.r]="_circleRadius()"
               [style.stroke-dasharray.px]="_strokeCircumference()"
               [style.stroke-dashoffset.px]="_strokeDashOffset()"
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
new file mode 100644
index 000000000000..6a8d81c23070
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
@@ -0,0 +1,385 @@
+import {async, TestBed} from '@angular/core/testing';
+import {
+  MatProgressSpinner,
+  MatProgressSpinnerModule
+} from '@angular/material-experimental/mdc-progress-spinner';
+import {CommonModule} from '@angular/common';
+import {By} from '@angular/platform-browser';
+import {MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS} from '@angular/material/progress-spinner';
+import {Component, ElementRef, ViewChild, ViewEncapsulation} from '@angular/core';
+
+describe('MDC-based MatProgressSpinner', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatProgressSpinnerModule, CommonModule],
+      declarations: [
+        BasicProgressSpinner,
+        IndeterminateProgressSpinner,
+        ProgressSpinnerWithValueAndBoundMode,
+        ProgressSpinnerWithColor,
+        ProgressSpinnerCustomStrokeWidth,
+        ProgressSpinnerCustomDiameter,
+        SpinnerWithColor,
+        ProgressSpinnerWithStringValues,
+        IndeterminateSpinnerInShadowDom,
+        IndeterminateSpinnerInShadowDomWithNgIf,
+      ],
+    }).compileComponents();
+  }));
+
+  it('should apply a mode of "determinate" if no mode is provided.', () => {
+    let fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.mode).toBe('determinate');
+  });
+
+  it('should not modify the mode if a valid mode is provided.', () => {
+    let fixture = TestBed.createComponent(IndeterminateProgressSpinner);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.mode).toBe('indeterminate');
+  });
+
+  it('should define a default value of zero for the value attribute', () => {
+    let fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.value).toBe(0);
+  });
+
+  it('should set the value to 0 when the mode is set to indeterminate', () => {
+    let fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    fixture.componentInstance.mode = 'determinate';
+    fixture.detectChanges();
+
+    expect(progressElement.componentInstance.value).toBe(50);
+    fixture.componentInstance.mode = 'indeterminate';
+    fixture.detectChanges();
+    expect(progressElement.componentInstance.value).toBe(0);
+  });
+
+  it('should retain the value if it updates while indeterminate', () => {
+    let fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+
+    fixture.componentInstance.mode = 'determinate';
+    fixture.detectChanges();
+    expect(progressElement.componentInstance.value).toBe(50);
+
+    fixture.componentInstance.mode = 'indeterminate';
+    fixture.detectChanges();
+    expect(progressElement.componentInstance.value).toBe(0);
+
+    fixture.componentInstance.value = 75;
+    fixture.detectChanges();
+    expect(progressElement.componentInstance.value).toBe(0);
+
+    fixture.componentInstance.mode = 'determinate';
+    fixture.detectChanges();
+    expect(progressElement.componentInstance.value).toBe(75);
+  });
+
+  it('should clamp the value of the progress between 0 and 100', () => {
+    let fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    let progressComponent = progressElement.componentInstance;
+
+    progressComponent.value = 50;
+    expect(progressComponent.value).toBe(50);
+
+    progressComponent.value = 0;
+    expect(progressComponent.value).toBe(0);
+
+    progressComponent.value = 100;
+    expect(progressComponent.value).toBe(100);
+
+    progressComponent.value = 999;
+    expect(progressComponent.value).toBe(100);
+
+    progressComponent.value = -10;
+    expect(progressComponent.value).toBe(0);
+  });
+
+  it('should default to a stroke width that is 10% of the diameter', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomDiameter);
+    const spinner = fixture.debugElement.query(By.directive(MatProgressSpinner))!;
+
+    fixture.componentInstance.diameter = 67;
+    fixture.detectChanges();
+
+    expect(spinner.componentInstance.strokeWidth).toBe(6.7);
+  });
+
+  it('should allow a custom diameter', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomDiameter);
+    const spinner = fixture.debugElement.query(By.css('mat-progress-spinner'))!.nativeElement;
+    const svgElement = fixture.nativeElement.querySelector('svg');
+
+    fixture.componentInstance.diameter = 32;
+    fixture.detectChanges();
+
+    expect(parseInt(spinner.style.width))
+      .toBe(32, 'Expected the custom diameter to be applied to the host element width.');
+    expect(parseInt(spinner.style.height))
+      .toBe(32, 'Expected the custom diameter to be applied to the host element height.');
+    expect(parseInt(svgElement.clientWidth))
+      .toBe(32, 'Expected the custom diameter to be applied to the svg element width.');
+    expect(parseInt(svgElement.clientHeight))
+      .toBe(32, 'Expected the custom diameter to be applied to the svg element height.');
+    expect(svgElement.getAttribute('viewBox'))
+      .toBe('0 0 25.2 25.2', 'Expected the custom diameter to be applied to the svg viewBox.');
+  });
+
+  it('should allow a custom stroke width', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomStrokeWidth);
+
+    fixture.componentInstance.strokeWidth = 40;
+    fixture.detectChanges();
+
+    const circleElement = fixture.nativeElement.querySelector('circle');
+    const svgElement = fixture.nativeElement.querySelector('svg');
+
+    expect(parseInt(circleElement.style.strokeWidth)).toBe(40, 'Expected the custom stroke ' +
+      'width to be applied to the circle element as a percentage of the element size.');
+    expect(svgElement.getAttribute('viewBox'))
+      .toBe('0 0 130 130', 'Expected the viewBox to be adjusted based on the stroke width.');
+  });
+
+  it('should expand the host element if the stroke width is greater than the default', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomStrokeWidth);
+    const element = fixture.debugElement.nativeElement.querySelector('.mat-mdc-progress-spinner');
+
+    fixture.componentInstance.strokeWidth = 40;
+    fixture.detectChanges();
+
+    expect(element.style.width).toBe('100px');
+    expect(element.style.height).toBe('100px');
+  });
+
+  it('should not collapse the host element if the stroke width is less than the default', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomStrokeWidth);
+    const element = fixture.debugElement.nativeElement.querySelector('.mat-mdc-progress-spinner');
+
+    fixture.componentInstance.strokeWidth = 5;
+    fixture.detectChanges();
+
+    expect(element.style.width).toBe('100px');
+    expect(element.style.height).toBe('100px');
+  });
+
+  it('should set the color class on the mat-spinner', () => {
+    let fixture = TestBed.createComponent(SpinnerWithColor);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('mat-spinner'))!;
+
+    expect(progressElement.nativeElement.classList).toContain('mat-primary');
+
+    fixture.componentInstance.color = 'accent';
+    fixture.detectChanges();
+
+    expect(progressElement.nativeElement.classList).toContain('mat-accent');
+    expect(progressElement.nativeElement.classList).not.toContain('mat-primary');
+  });
+
+  it('should set the color class on the mat-progress-spinner', () => {
+    let fixture = TestBed.createComponent(ProgressSpinnerWithColor);
+    fixture.detectChanges();
+
+    let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+
+    expect(progressElement.nativeElement.classList).toContain('mat-primary');
+
+    fixture.componentInstance.color = 'accent';
+    fixture.detectChanges();
+
+    expect(progressElement.nativeElement.classList).toContain('mat-accent');
+    expect(progressElement.nativeElement.classList).not.toContain('mat-primary');
+  });
+
+  it('should remove the underlying SVG element from the tab order explicitly', () => {
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('svg').getAttribute('focusable')).toBe('false');
+  });
+
+  it('should handle the number inputs being passed in as strings', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerWithStringValues);
+    const spinner = fixture.debugElement.query(By.directive(MatProgressSpinner))!;
+    const svgElement = spinner.nativeElement.querySelector('svg');
+
+    fixture.detectChanges();
+
+    expect(spinner.componentInstance.diameter).toBe(37);
+    expect(spinner.componentInstance.strokeWidth).toBe(11);
+    expect(spinner.componentInstance.value).toBe(25);
+
+    expect(spinner.nativeElement.style.width).toBe('37px');
+    expect(spinner.nativeElement.style.height).toBe('37px');
+
+    expect(svgElement.clientWidth).toBe(37);
+    expect(svgElement.clientHeight).toBe(37);
+    expect(svgElement.getAttribute('viewBox')).toBe('0 0 38 38');
+  });
+
+  it('should update the element size when changed dynamically', () => {
+    let fixture = TestBed.createComponent(BasicProgressSpinner);
+    let spinner = fixture.debugElement.query(By.directive(MatProgressSpinner))!;
+    spinner.componentInstance.diameter = 32;
+    fixture.detectChanges();
+    expect(spinner.nativeElement.style.width).toBe('32px');
+    expect(spinner.nativeElement.style.height).toBe('32px');
+  });
+
+  it('should be able to set a default diameter', () => {
+    TestBed
+      .resetTestingModule()
+      .configureTestingModule({
+        imports: [MatProgressSpinnerModule],
+        declarations: [BasicProgressSpinner],
+        providers: [{
+          provide: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
+          useValue: {diameter: 23}
+        }]
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.diameter).toBe(23);
+  });
+
+  it('should be able to set a default stroke width', () => {
+    TestBed
+      .resetTestingModule()
+      .configureTestingModule({
+        imports: [MatProgressSpinnerModule],
+        declarations: [BasicProgressSpinner],
+        providers: [{
+          provide: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
+          useValue: {strokeWidth: 7}
+        }]
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(BasicProgressSpinner);
+    fixture.detectChanges();
+
+    const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    expect(progressElement.componentInstance.strokeWidth).toBe(7);
+  });
+
+  it('should set `aria-valuenow` to the current value in determinate mode', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
+    const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    fixture.componentInstance.mode = 'determinate';
+    fixture.componentInstance.value = 37;
+    fixture.detectChanges();
+
+    expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('37');
+  });
+
+  it('should clear `aria-valuenow` in indeterminate mode', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
+    const progressElement = fixture.debugElement.query(By.css('mat-progress-spinner'))!;
+    fixture.componentInstance.mode = 'determinate';
+    fixture.componentInstance.value = 89;
+    fixture.detectChanges();
+
+    expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(true);
+
+    fixture.componentInstance.mode = 'indeterminate';
+    fixture.detectChanges();
+
+    expect(progressElement.nativeElement.hasAttribute('aria-valuenow')).toBe(false);
+  });
+});
+
+
+@Component({template: '<mat-progress-spinner></mat-progress-spinner>'})
+class BasicProgressSpinner {
+}
+
+@Component({template: '<mat-progress-spinner [strokeWidth]="strokeWidth"></mat-progress-spinner>'})
+class ProgressSpinnerCustomStrokeWidth {
+  strokeWidth: number;
+}
+
+@Component({template: '<mat-progress-spinner [diameter]="diameter"></mat-progress-spinner>'})
+class ProgressSpinnerCustomDiameter {
+  diameter: number;
+}
+
+@Component({template: '<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>'})
+class IndeterminateProgressSpinner {
+}
+
+@Component({
+  template: '<mat-progress-spinner [value]="value" [mode]="mode"></mat-progress-spinner>'
+})
+class ProgressSpinnerWithValueAndBoundMode {
+  mode = 'indeterminate';
+  value = 50;
+}
+
+@Component({
+  template: `
+    <mat-spinner [color]="color"></mat-spinner>`
+})
+class SpinnerWithColor {
+  color: string = 'primary';
+}
+
+@Component({
+  template: `
+    <mat-progress-spinner value="50" [color]="color"></mat-progress-spinner>`
+})
+class ProgressSpinnerWithColor {
+  color: string = 'primary';
+}
+
+@Component({
+  template: `
+    <mat-progress-spinner value="25" diameter="37" strokeWidth="11"></mat-progress-spinner>
+  `
+})
+class ProgressSpinnerWithStringValues {
+}
+
+
+@Component({
+  template: `
+    <mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
+  `,
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+class IndeterminateSpinnerInShadowDom {
+  diameter: number;
+}
+
+@Component({
+  template: `
+    <div *ngIf="true">
+      <mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+class IndeterminateSpinnerInShadowDomWithNgIf {
+  @ViewChild(MatProgressSpinner, {read: ElementRef})
+  spinner: ElementRef<HTMLElement>;
+
+  diameter: number;
+}
+
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 4eed70da188a..ddaa6bd318ac 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -52,6 +52,39 @@ const BASE_SIZE = 100;
  */
 const BASE_STROKE_WIDTH = 10;
 
+/** @docs-private */
+class ProgressSpinnerAdapter implements MDCCircularProgressAdapter {
+  constructor(private readonly _delegate: MatProgressSpinner) {
+  }
+
+  addClass(className: string) {
+    return this._delegate._rootElement.nativeElement.classList.add(className);
+  }
+
+  removeClass(className: string) {
+    return this._delegate._rootElement.nativeElement.classList.remove(className);
+  }
+
+  hasClass(className: string) {
+    return this._delegate._rootElement.nativeElement.classList.contains(className);
+  }
+
+  setAttribute(attributeName: string, value: string) {
+    return this._delegate._rootElement.nativeElement.setAttribute(attributeName, value);
+  }
+
+  removeAttribute(attributeName: string) {
+    return this._delegate._rootElement.nativeElement.removeAttribute(attributeName);
+  }
+
+  setDeterminateCircleAttribute(attributeName: string, value: string) {
+    return this._delegate._determinateCircle.nativeElement.setAttribute(attributeName, value);
+  }
+
+  getDeterminateCircleAttribute(attributeName: string) {
+    return this._delegate._determinateCircle.nativeElement.getAttribute(attributeName);
+  }
+}
 
 @Component({
   selector: 'mat-progress-spinner',
@@ -74,17 +107,21 @@ const BASE_STROKE_WIDTH = 10;
   encapsulation: ViewEncapsulation.None,
 })
 export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit,
-  OnDestroy,
-  CanColor {
+  OnDestroy, CanColor {
   static ngAcceptInputType_diameter: NumberInput;
   static ngAcceptInputType_strokeWidth: NumberInput;
   static ngAcceptInputType_value: NumberInput;
 
   /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
   _noopAnimations: boolean;
+
   /** Implements all of the logic of the MDC circular progress. */
   _foundation: MDCCircularProgressFoundation;
+
+  /** Root element of MDCCircularProgress. */
   @ViewChild('spinnerRoot') _rootElement: ElementRef<HTMLElement>;
+
+  /** The element of the determinate spinner. */
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 
   private _adapter: MDCCircularProgressAdapter = {
@@ -218,13 +255,14 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     }
   }
 
+  /** Syncs the state of the progress spinner with the MDC foundation. */
   private _syncFoundation() {
     const foundation = this._foundation;
 
     if (foundation) {
       const mode = this.mode;
-      foundation.setDeterminate(mode === 'determinate');
       foundation.setProgress(this.value / 100);
+      foundation.setDeterminate(mode === 'determinate');
     }
   }
 }

From 122174f59a7e6cb21a601994f6b5628ddec577c0 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Thu, 23 Jul 2020 17:23:53 -0700
Subject: [PATCH 09/18] remove separate class for MatSpinner

---
 .../mdc-progress-spinner/module.ts            |  4 +-
 .../progress-spinner.html                     |  2 +-
 .../progress-spinner.scss                     |  2 +-
 .../progress-spinner.spec.ts                  |  2 +-
 .../mdc-progress-spinner/progress-spinner.ts  | 50 +++++--------------
 5 files changed, 16 insertions(+), 44 deletions(-)

diff --git a/src/material-experimental/mdc-progress-spinner/module.ts b/src/material-experimental/mdc-progress-spinner/module.ts
index 03223c2ca729..20e0320db991 100644
--- a/src/material-experimental/mdc-progress-spinner/module.ts
+++ b/src/material-experimental/mdc-progress-spinner/module.ts
@@ -14,9 +14,7 @@ import {CommonModule} from '@angular/common';
 @NgModule({
   exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
   declarations: [MatProgressSpinner, MatSpinner],
-  imports: [
-    CommonModule
-  ]
+  imports: [CommonModule]
 })
 export class MatProgressSpinnerModule {
 }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index ab1b12fabbd8..e41ecaddaac8 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -3,7 +3,7 @@
        xmlns="http://www.w3.org/2000/svg" focusable="false">
     <circle [attr.r]="_circleRadius()"
             [style.stroke-dasharray.px]="_strokeCircumference()"
-            [style.stroke-dashoffset.px]="_strokeCircumference()/2"
+            [style.stroke-dashoffset.px]="_strokeCircumference() / 2"
             [style.stroke-width.%]="_circleStrokeWidth()"
             cx="50%" cy="50%"/>
   </svg>
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 40e045e74e2d..9963b1d21291 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -5,9 +5,9 @@
 @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-spinner {
-  display: block;
 
   .mdc-circular-progress {
+    // MDC circular spinner sets width and height to 48px by default.
     width: 100%;
     height: 100%;
   }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
index 6a8d81c23070..46516577c9d1 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.spec.ts
@@ -287,7 +287,7 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.value = 37;
     fixture.detectChanges();
 
-    expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('37');
+    expect(progressElement.nativeElement.getAttribute('aria-valuenow')).toBe('0.37');
   });
 
   it('should clear `aria-valuenow` in indeterminate mode', () => {
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index ddaa6bd318ac..c2813845c333 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -87,7 +87,7 @@ class ProgressSpinnerAdapter implements MDCCircularProgressAdapter {
 }
 
 @Component({
-  selector: 'mat-progress-spinner',
+  selector: 'mat-progress-spinner, mat-spinner',
   exportAs: 'matProgressSpinner',
   host: {
     'role': 'progressbar',
@@ -95,9 +95,9 @@ class ProgressSpinnerAdapter implements MDCCircularProgressAdapter {
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
-    '[attr.aria-valuemin]': 'mode === "determinate" ? 0 : null',
-    '[attr.aria-valuemax]': 'mode === "determinate" ? 100 : null',
-    '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': '1',
+    '[attr.aria-valuenow]': 'mode === "determinate" ? value / 100 : null',
     '[attr.mode]': 'mode',
   },
   inputs: ['color'],
@@ -108,9 +108,6 @@ class ProgressSpinnerAdapter implements MDCCircularProgressAdapter {
 })
 export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit,
   OnDestroy, CanColor {
-  static ngAcceptInputType_diameter: NumberInput;
-  static ngAcceptInputType_strokeWidth: NumberInput;
-  static ngAcceptInputType_value: NumberInput;
 
   /** Whether the _mat-animation-noopable class should be applied, disabling animations.  */
   _noopAnimations: boolean;
@@ -155,7 +152,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     }
   }
 
-  private _mode: ProgressSpinnerMode = 'determinate';
+  private _mode: ProgressSpinnerMode = this._elementRef.nativeElement.nodeName.toLowerCase() ===
+  'mat-spinner' ? 'indeterminate' : 'determinate';
 
   /**
    * Mode of the progress bar.
@@ -165,13 +163,9 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
    * Mirrored to mode attribute.
    */
   @Input()
-  get mode(): ProgressSpinnerMode {
-    return this._mode;
-  }
+  get mode(): ProgressSpinnerMode { return this._mode; }
 
   set mode(value: ProgressSpinnerMode) {
-    // Note that we don't technically need a getter and a setter here,
-    // but we use it to match the behavior of the existing mat-progress-bar.
     this._mode = value;
     this._syncFoundation();
   }
@@ -265,6 +259,10 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
       foundation.setDeterminate(mode === 'determinate');
     }
   }
+
+  static ngAcceptInputType_diameter: NumberInput;
+  static ngAcceptInputType_strokeWidth: NumberInput;
+  static ngAcceptInputType_value: NumberInput;
 }
 
 /**
@@ -273,28 +271,4 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
  * This is a component definition to be used as a convenience reference to create an
  * indeterminate `<mat-progress-spinner>` instance.
  */
-@Component({
-  selector: 'mat-spinner',
-  host: {
-    'role': 'progressbar',
-    'mode': 'indeterminate',
-    'class': 'mat-mdc-spinner mat-mdc-progress-spinner',
-    '[class._mat-animation-noopable]': `_noopAnimations`,
-    '[style.width.px]': 'diameter',
-    '[style.height.px]': 'diameter',
-  },
-  inputs: ['color'],
-  templateUrl: 'progress-spinner.html',
-  styleUrls: ['progress-spinner.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class MatSpinner extends MatProgressSpinner {
-  constructor(elementRef: ElementRef<HTMLElement>,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
-              @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
-                defaults?: MatProgressSpinnerDefaultOptions) {
-    super(elementRef, animationMode, defaults);
-    this.mode = 'indeterminate';
-  }
-}
+export {MatProgressSpinner as MatSpinner}

From b648bfb4c354f6f10e9f73bbe55bf2011b1534c7 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Fri, 24 Jul 2020 12:30:01 -0700
Subject: [PATCH 10/18] add e2e tests

---
 src/e2e-app/BUILD.bazel                       |  1 +
 src/e2e-app/e2e-app/e2e-app-layout.html       |  1 +
 src/e2e-app/e2e-app/routes.ts                 |  2 ++
 src/e2e-app/main-module.ts                    |  2 ++
 .../mdc-progress-spinner-e2e.html             |  3 ++
 .../mdc-progress-spinner-e2e.ts               | 19 ++++++++++
 .../mdc-progress-spinner-module.ts            | 17 +++++++++
 .../progress-spinner.e2e.spec.ts              | 18 ++++++++++
 .../progress-spinner.scss                     |  2 ++
 .../mdc-progress-spinner/progress-spinner.ts  | 36 ++-----------------
 10 files changed, 67 insertions(+), 34 deletions(-)
 create mode 100644 src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.html
 create mode 100644 src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.ts
 create mode 100644 src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-module.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts

diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
index 454af893fda4..8b6285cb62cf 100644
--- a/src/e2e-app/BUILD.bazel
+++ b/src/e2e-app/BUILD.bazel
@@ -40,6 +40,7 @@ ng_module(
         "//src/material-experimental/mdc-input",
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-bar",
+        "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
         "//src/material-experimental/mdc-slider",
diff --git a/src/e2e-app/e2e-app/e2e-app-layout.html b/src/e2e-app/e2e-app/e2e-app-layout.html
index 36147be3f023..1cedee067943 100644
--- a/src/e2e-app/e2e-app/e2e-app-layout.html
+++ b/src/e2e-app/e2e-app/e2e-app-layout.html
@@ -34,6 +34,7 @@
   <a mat-list-item [routerLink]="['mdc-table']">MDC Table</a>
   <a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
   <a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
+  <a mat-list-item [routerLink]="['mdc-progress-spinner']">MDC Progress spinner</a>
 </mat-nav-list>
 
 <main>
diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
index a88f9fb64b84..e699e23e181d 100644
--- a/src/e2e-app/e2e-app/routes.ts
+++ b/src/e2e-app/e2e-app/routes.ts
@@ -23,6 +23,7 @@ import {MdcSliderE2e} from '../mdc-slider/mdc-slider-e2e';
 import {MdcTableE2e} from '../mdc-table/mdc-table-e2e';
 import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
 import {MdcProgressBarE2E} from '../mdc-progress-bar/mdc-progress-bar-e2e';
+import {MdcProgressSpinnerE2e} from '../mdc-progress-spinner/mdc-progress-spinner-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -61,6 +62,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'mdc-tabs', component: MdcTabsE2e},
   {path: 'mdc-table', component: MdcTableE2e},
   {path: 'mdc-progress-bar', component: MdcProgressBarE2E},
+  {path: 'mdc-progress-spinner', component: MdcProgressSpinnerE2e},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
diff --git a/src/e2e-app/main-module.ts b/src/e2e-app/main-module.ts
index b2bb0cc28d35..30a8e3e36b5f 100644
--- a/src/e2e-app/main-module.ts
+++ b/src/e2e-app/main-module.ts
@@ -40,6 +40,7 @@ import {TabsE2eModule} from './tabs/tabs-e2e-module';
 import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
 import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
 import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-module';
+import {MdcProgressSpinnerE2eModule} from './mdc-progress-spinner/mdc-progress-spinner-module';
 
 @NgModule({
   imports: [
@@ -72,6 +73,7 @@ import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-m
     MdcTableE2eModule,
     MdcTabsE2eModule,
     MdcProgressBarE2eModule,
+    MdcProgressSpinnerE2eModule,
     MenuE2eModule,
     ProgressBarE2eModule,
     ProgressSpinnerE2eModule,
diff --git a/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.html b/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.html
new file mode 100644
index 000000000000..e2672d5bd949
--- /dev/null
+++ b/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.html
@@ -0,0 +1,3 @@
+<mat-progress-spinner [value]="value" [strokeWidth]="strokeWidth"></mat-progress-spinner>
+<mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
+<mat-spinner></mat-spinner>
diff --git a/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.ts b/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.ts
new file mode 100644
index 000000000000..ad20e871b974
--- /dev/null
+++ b/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'mdc-progress-spinner-e2e',
+  templateUrl: 'mdc-progress-spinner-e2e.html'
+})
+export class MdcProgressSpinnerE2e {
+  value = 65;
+  diameter = 37;
+  strokeWidth = 6;
+}
diff --git a/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-module.ts b/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-module.ts
new file mode 100644
index 000000000000..78da71c0da20
--- /dev/null
+++ b/src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-module.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
+import {MdcProgressSpinnerE2e} from './mdc-progress-spinner-e2e';
+
+@NgModule({
+  imports: [MatProgressSpinnerModule],
+  declarations: [MdcProgressSpinnerE2e]
+})
+export class MdcProgressSpinnerE2eModule {}
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts
new file mode 100644
index 000000000000..a40f6da8d066
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts
@@ -0,0 +1,18 @@
+import {browser, by, element} from 'protractor';
+
+describe('progress-spinner', () => {
+  beforeEach(async () => await browser.get('/progress-spinner'));
+
+  it('should render a determinate progress spinner', async () => {
+    expect(await element(by.css('mat-progress-spinner')).isPresent()).toBe(true);
+  });
+
+  it('should render an indeterminate progress spinner', async () => {
+    expect(await element(by.css('mat-progress-spinner[mode="indeterminate"]')).isPresent())
+      .toBe(true);
+  });
+
+  it('should render a spinner', async () => {
+    expect(await element(by.css('mat-spinner')).isPresent()).toBe(true);
+  });
+});
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 9963b1d21291..12d96d1d20a6 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -5,6 +5,8 @@
 @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-spinner {
+  // Explicitly set to `block` since the browser defaults custom elements to `inline`.
+  display: block;
 
   .mdc-circular-progress {
     // MDC circular spinner sets width and height to 48px by default.
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index c2813845c333..fed22539589f 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -52,40 +52,6 @@ const BASE_SIZE = 100;
  */
 const BASE_STROKE_WIDTH = 10;
 
-/** @docs-private */
-class ProgressSpinnerAdapter implements MDCCircularProgressAdapter {
-  constructor(private readonly _delegate: MatProgressSpinner) {
-  }
-
-  addClass(className: string) {
-    return this._delegate._rootElement.nativeElement.classList.add(className);
-  }
-
-  removeClass(className: string) {
-    return this._delegate._rootElement.nativeElement.classList.remove(className);
-  }
-
-  hasClass(className: string) {
-    return this._delegate._rootElement.nativeElement.classList.contains(className);
-  }
-
-  setAttribute(attributeName: string, value: string) {
-    return this._delegate._rootElement.nativeElement.setAttribute(attributeName, value);
-  }
-
-  removeAttribute(attributeName: string) {
-    return this._delegate._rootElement.nativeElement.removeAttribute(attributeName);
-  }
-
-  setDeterminateCircleAttribute(attributeName: string, value: string) {
-    return this._delegate._determinateCircle.nativeElement.setAttribute(attributeName, value);
-  }
-
-  getDeterminateCircleAttribute(attributeName: string) {
-    return this._delegate._determinateCircle.nativeElement.getAttribute(attributeName);
-  }
-}
-
 @Component({
   selector: 'mat-progress-spinner, mat-spinner',
   exportAs: 'matProgressSpinner',
@@ -121,6 +87,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   /** The element of the determinate spinner. */
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 
+  /** Adapter used by MDC to interact with the DOM. */
+  // TODO: switch to class when MDC removes object spread in foundation
   private _adapter: MDCCircularProgressAdapter = {
     addClass: (className: string) => this._rootElement.nativeElement.classList.add(className),
     hasClass: (className: string) => this._rootElement.nativeElement.classList.contains(className),

From dfbda937acf9267ab47245cc71b0943b223e8693 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Fri, 24 Jul 2020 16:44:47 -0700
Subject: [PATCH 11/18] add harness

---
 src/dev-app/mdc-progress-spinner/BUILD.bazel  |  2 +-
 .../mdc-progress-spinner/BUILD.bazel          |  8 ++--
 .../progress-spinner.html                     | 44 +++++++++----------
 .../progress-spinner.scss                     | 13 +-----
 .../mdc-progress-spinner/progress-spinner.ts  | 14 +++---
 .../mdc-progress-spinner/testing/BUILD.bazel  | 38 ++++++++++++++++
 .../mdc-progress-spinner/testing/index.ts     |  9 ++++
 .../testing/progress-spinner-harness.spec.ts  |  7 +++
 .../testing/progress-spinner-harness.ts       | 42 ++++++++++++++++++
 .../testing/public-api.ts                     |  9 ++++
 10 files changed, 139 insertions(+), 47 deletions(-)
 create mode 100644 src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel
 create mode 100644 src/material-experimental/mdc-progress-spinner/testing/index.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.spec.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.ts
 create mode 100644 src/material-experimental/mdc-progress-spinner/testing/public-api.ts

diff --git a/src/dev-app/mdc-progress-spinner/BUILD.bazel b/src/dev-app/mdc-progress-spinner/BUILD.bazel
index 5504780cdae4..851ca3cd6941 100644
--- a/src/dev-app/mdc-progress-spinner/BUILD.bazel
+++ b/src/dev-app/mdc-progress-spinner/BUILD.bazel
@@ -11,11 +11,11 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-progress-spinner",
-        "@npm//@angular/router",
         "//src/material/button",
         "//src/material/button-toggle",
         "//src/material/checkbox",
         "@npm//@angular/forms",
+        "@npm//@angular/router",
     ],
 )
 
diff --git a/src/material-experimental/mdc-progress-spinner/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
index 18700b083103..73419190adc9 100644
--- a/src/material-experimental/mdc-progress-spinner/BUILD.bazel
+++ b/src/material-experimental/mdc-progress-spinner/BUILD.bazel
@@ -60,10 +60,10 @@ ng_test_library(
     ),
     deps = [
         ":mdc-progress-spinner",
-         "//src/cdk/platform",
-         "//src/material/progress-spinner",
-         "@npm//@angular/common",
-         "@npm//@angular/platform-browser",
+        "//src/cdk/platform",
+        "//src/material/progress-spinner",
+        "@npm//@angular/common",
+        "@npm//@angular/platform-browser",
     ],
 )
 
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index e41ecaddaac8..c507462a6aa0 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -9,29 +9,27 @@
   </svg>
 </ng-template>
 
-<div class="mdc-circular-progress" role="progressbar" #spinnerRoot>
-  <div class="mdc-circular-progress__determinate-container" #determinateSpinner>
-    <svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
-         xmlns="http://www.w3.org/2000/svg" focusable="false">
-      <circle [attr.r]="_circleRadius()"
-              [style.stroke-dasharray.px]="_strokeCircumference()"
-              [style.stroke-dashoffset.px]="_strokeDashOffset()"
-              [style.stroke-width.%]="_circleStrokeWidth()"
-              class="mdc-circular-progress__determinate-circle"
-              cx="50%" cy="50%"/>
-    </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">
-        <ng-container [ngTemplateOutlet]="circle"></ng-container>
-      </div>
-      <div class="mdc-circular-progress__gap-patch">
-        <ng-container [ngTemplateOutlet]="circle"></ng-container>
-      </div>
-      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
-        <ng-container [ngTemplateOutlet]="circle"></ng-container>
-      </div>
+<div class="mdc-circular-progress__determinate-container" #determinateSpinner>
+  <svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
+       xmlns="http://www.w3.org/2000/svg" focusable="false">
+    <circle [attr.r]="_circleRadius()"
+            [style.stroke-dasharray.px]="_strokeCircumference()"
+            [style.stroke-dashoffset.px]="_strokeDashOffset()"
+            [style.stroke-width.%]="_circleStrokeWidth()"
+            class="mdc-circular-progress__determinate-circle"
+            cx="50%" cy="50%"/>
+  </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">
+      <ng-container [ngTemplateOutlet]="circle"></ng-container>
+    </div>
+    <div class="mdc-circular-progress__gap-patch">
+      <ng-container [ngTemplateOutlet]="circle"></ng-container>
+    </div>
+    <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
+      <ng-container [ngTemplateOutlet]="circle"></ng-container>
     </div>
   </div>
 </div>
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 12d96d1d20a6..610abd1ec850 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -4,17 +4,6 @@
 
 @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
 
-.mat-mdc-progress-spinner {
-  // Explicitly set to `block` since the browser defaults custom elements to `inline`.
-  display: block;
-
-  .mdc-circular-progress {
-    // MDC circular spinner sets width and height to 48px by default.
-    width: 100%;
-    height: 100%;
-  }
-
-  &:not(._mat-animation-noopable) {
+:not(._mat-animation-noopable) {
     @include mdc-circular-progress-core-styles($query: animation);
-  }
 }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index fed22539589f..d623dfe0012d 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -57,7 +57,7 @@ const BASE_STROKE_WIDTH = 10;
   exportAs: 'matProgressSpinner',
   host: {
     'role': 'progressbar',
-    'class': 'mat-mdc-progress-spinner',
+    'class': 'mat-mdc-progress-spinner mdc-circular-progress',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
@@ -82,7 +82,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   _foundation: MDCCircularProgressFoundation;
 
   /** Root element of MDCCircularProgress. */
-  @ViewChild('spinnerRoot') _rootElement: ElementRef<HTMLElement>;
+  // @ViewChild('spinnerRoot') _elementRef: ElementRef<HTMLElement>;
 
   /** The element of the determinate spinner. */
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
@@ -90,12 +90,12 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   /** Adapter used by MDC to interact with the DOM. */
   // TODO: switch to class when MDC removes object spread in foundation
   private _adapter: MDCCircularProgressAdapter = {
-    addClass: (className: string) => this._rootElement.nativeElement.classList.add(className),
-    hasClass: (className: string) => this._rootElement.nativeElement.classList.contains(className),
-    removeClass: (className: string) => this._rootElement.nativeElement.classList.remove(className),
-    removeAttribute: (name: string) => this._rootElement.nativeElement.removeAttribute(name),
+    addClass: (className: string) => this._elementRef.nativeElement.classList.add(className),
+    hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
+    removeClass: (className: string) => this._elementRef.nativeElement.classList.remove(className),
+    removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
     setAttribute: (name: string, value: string) =>
-      this._rootElement.nativeElement.setAttribute(name, value),
+      this._elementRef.nativeElement.setAttribute(name, value),
     getDeterminateCircleAttribute: (attributeName: string) =>
       this._determinateCircle.nativeElement.getAttribute(attributeName),
     setDeterminateCircleAttribute: (attributeName: string, value: string) =>
diff --git a/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel
new file mode 100644
index 000000000000..e44195da954f
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel
@@ -0,0 +1,38 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material-experimental/mdc-progress-spinner/testing",
+    deps = [
+        "//src/cdk/coercion",
+        "//src/cdk/testing",
+        "//src/material/progress-spinner/testing",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":testing",
+        "//src/material-experimental/mdc-progress-spinner",
+        "//src/material/progress-spinner/testing:harness_tests_lib",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = [
+        "@npm//:node_modules/@material/linear-progress/dist/mdc.linearProgress.js",
+    ],
+    deps = [
+        ":unit_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
diff --git a/src/material-experimental/mdc-progress-spinner/testing/index.ts b/src/material-experimental/mdc-progress-spinner/testing/index.ts
new file mode 100644
index 000000000000..676ca90f1ffa
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/testing/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './public-api';
diff --git a/src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.spec.ts b/src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.spec.ts
new file mode 100644
index 000000000000..ea15d90dadbc
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.spec.ts
@@ -0,0 +1,7 @@
+import {runHarnessTests} from '@angular/material/progress-spinner/testing/shared.spec';
+import {MatProgressSpinnerHarness} from './progress-spinner-harness';
+import {MatProgressSpinnerModule} from '../index';
+
+describe('MDC-based MatProgressSpinnerHarness', () => {
+  runHarnessTests(MatProgressSpinnerModule, MatProgressSpinnerHarness);
+});
diff --git a/src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.ts b/src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.ts
new file mode 100644
index 000000000000..1ab7e56ad0fb
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/testing/progress-spinner-harness.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
+import {ProgressSpinnerHarnessFilters} from '@angular/material/progress-spinner/testing';
+
+/** Harness for interacting with a MDC based mat-progress-spinner in tests. */
+export class MatProgressSpinnerHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatProgressSpinner` instance. */
+  static hostSelector = 'mat-progress-spinner,mat-spinner';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatProgressSpinnerHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which progress spinner instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: ProgressSpinnerHarnessFilters = {}):
+    HarnessPredicate<MatProgressSpinnerHarness> {
+    return new HarnessPredicate(MatProgressSpinnerHarness, options);
+  }
+
+  /** Gets the progress spinner's value. */
+  async getValue(): Promise<number|null> {
+    const host = await this.host();
+    const ariaValue = await host.getAttribute('aria-valuenow');
+    return ariaValue ? coerceNumberProperty(ariaValue) : null;
+  }
+
+  /** Gets the progress spinner's mode. */
+  async getMode(): Promise<ProgressSpinnerMode> {
+    const modeAttr = (await this.host()).getAttribute('mode');
+    return await modeAttr as ProgressSpinnerMode;
+  }
+}
diff --git a/src/material-experimental/mdc-progress-spinner/testing/public-api.ts b/src/material-experimental/mdc-progress-spinner/testing/public-api.ts
new file mode 100644
index 000000000000..77f91ded9e77
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/testing/public-api.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './progress-spinner-harness';

From eda65bbb41b1f03adae08d8fd15e34646cd304c9 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 27 Jul 2020 13:45:16 -0700
Subject: [PATCH 12/18] add user documantation README

---
 .../mdc-progress-spinner/README.md            | 88 +++++++++++++++++++
 .../progress-spinner.html                     |  1 +
 .../mdc-progress-spinner/progress-spinner.ts  |  3 -
 3 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/material-experimental/mdc-progress-spinner/README.md

diff --git a/src/material-experimental/mdc-progress-spinner/README.md b/src/material-experimental/mdc-progress-spinner/README.md
new file mode 100644
index 000000000000..3c70c4e81c91
--- /dev/null
+++ b/src/material-experimental/mdc-progress-spinner/README.md
@@ -0,0 +1,88 @@
+This is prototype of an alternate version of `<mat-progress-spinner>` built on top of
+[MDC Web](https://github.com/material-components/material-components-web). It demonstrates how
+Angular Material could use MDC Web under the hood while still exposing the same API Angular users as
+the existing `<mat-progress-spinner>`. This component is experimental and should not be used in
+production.
+
+## How to use
+Assuming your application is already up and running using Angular Material, you can add this
+component by following these steps:
+
+1. Install Angular Material Experimental & MDC WEB:
+
+   ```bash
+   npm i material-components-web @angular/material-experimental
+   ```
+
+2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is
+   needed for the Sass compiler to be able to find the MDC Web Sass files.
+
+   ```json
+   ...
+   "styles": [
+     "src/styles.scss"
+   ],
+   "stylePreprocessorOptions": {
+     "includePaths": [
+       "node_modules/"
+     ]
+   },
+   ...
+   ```
+
+3. Import the experimental `MatProgressSpinnerModule` and add it to the module that declares your
+   component:
+
+   ```ts
+   import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
+
+   @NgModule({
+     declarations: [MyComponent],
+     imports: [MatProgressSpinnerModule],
+   })
+   export class MyModule {}
+   ```
+
+4. Add use `<mat-progress-spinner>` in your component's template, just like you would the normal
+   `<mat-progress-spinner>`:
+
+   ```html
+   <mat-progress-spinner [value]="42"></mat-progress-spinner>
+   ```
+
+5. Add the theme and typography mixins to your Sass. (There is currently no pre-built CSS option for
+   the experimental `<mat-progress-spinner>`):
+
+   ```scss
+   @import '~@angular/material/theming';
+   @import '~@angular/material-experimental/mdc-progress-spinner';
+
+   $my-primary: mat-palette($mat-indigo);
+   $my-accent:  mat-palette($mat-pink, A200, A100, A400);
+   $my-theme:   mat-light-theme((
+     color: (
+       primary: $my-primary, 
+       accent: $my-accent
+     )
+   ));
+
+   @include mat-mdc-progress-spinner-theme($my-theme);
+   @include mat-mdc-progress-spinner-typography();
+   ```
+
+## Replacing the standard progress spinner in an existing app
+Because the experimental API mirrors the API for the standard progress spinner, it can easily be swapped
+in by just changing the import paths. There is currently no schematic for this, but you can run the
+following string replace across your TypeScript files:
+
+```bash
+grep -lr --include="*.ts" --exclude-dir="node_modules" \
+  --exclude="*.d.ts" "['\"]@angular/material/progress-spinner['\"]" | xargs sed -i \
+  "s/['\"]@angular\/material\/progress-spinner['\"]/'@angular\/material-experimental\/mdc-progress-spinner'/g"
+```
+
+CSS styles and tests that depend on implementation details of mat-progress-spinner (such as getting
+elements from the template by class name) will need to be manually updated.
+
+There are some small visual differences between this progress and the standard `mat-progress-spinner`.
+This progress spinner has slightly different animation timings and easing curves.
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.html b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
index c507462a6aa0..ec5cf42f6dc3 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.html
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.html
@@ -20,6 +20,7 @@
             cx="50%" cy="50%"/>
   </svg>
 </div>
+<!--TODO: figure out why there are 3 separate svgs-->
 <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">
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index d623dfe0012d..912054075382 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -81,9 +81,6 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   /** Implements all of the logic of the MDC circular progress. */
   _foundation: MDCCircularProgressFoundation;
 
-  /** Root element of MDCCircularProgress. */
-  // @ViewChild('spinnerRoot') _elementRef: ElementRef<HTMLElement>;
-
   /** The element of the determinate spinner. */
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 

From de98adf4afba16ae6a7d8cf1617140e1393b26f4 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 27 Jul 2020 14:47:35 -0700
Subject: [PATCH 13/18] add codeowner, theme dep

---
 .github/CODEOWNERS                                             | 2 ++
 .../mdc-progress-spinner/progress-spinner.ts                   | 3 ++-
 src/material-experimental/mdc-theming/BUILD.bazel              | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 7b7715893236..862dd89182e3 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -177,6 +177,7 @@
 /src/dev-app/mdc-list/**                           @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
 /src/dev-app/mdc-progress-bar/**                   @crisbeto
+/src/dev-app/mdc-progress-spinner/**               @annieyw @mmalerba
 /src/dev-app/mdc-radio/**                          @mmalerba
 /src/dev-app/mdc-snack-bar/**                      @andrewseguin
 /src/dev-app/mdc-sidenav/**                        @crisbeto
@@ -236,6 +237,7 @@
 /src/e2e-app/mdc-input/**                          @devversion
 /src/e2e-app/mdc-menu/**                           @crisbeto
 /src/e2e-app/mdc-progress-bar/**                   @crisbeto
+/src/e2e-app/mdc-progress-spinner/**               @annieyw @mmalerba
 /src/e2e-app/mdc-radio/**                          @mmalerba
 /src/e2e-app/mdc-slider/**                         @andrewseguin
 /src/e2e-app/mdc-slide-toggle/**                   @crisbeto
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 912054075382..05d91c238a81 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -85,7 +85,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 
   /** Adapter used by MDC to interact with the DOM. */
-  // TODO: switch to class when MDC removes object spread in foundation
+    // TODO: switch to class when MDC removes object spread in foundation
+    // https://github.com/material-components/material-components-web/pull/6256
   private _adapter: MDCCircularProgressAdapter = {
     addClass: (className: string) => this._elementRef.nativeElement.classList.add(className),
     hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
diff --git a/src/material-experimental/mdc-theming/BUILD.bazel b/src/material-experimental/mdc-theming/BUILD.bazel
index 87ff3709bbf5..095b88a2f07f 100644
--- a/src/material-experimental/mdc-theming/BUILD.bazel
+++ b/src/material-experimental/mdc-theming/BUILD.bazel
@@ -25,6 +25,7 @@ sass_library(
         "//src/material-experimental/mdc-list:mdc_list_scss_lib",
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
+        "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
         "//src/material-experimental/mdc-slider:mdc_slider_scss_lib",

From b979d7776cc4dcbd9502d00a761e6cba44bc52ab Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 27 Jul 2020 15:43:17 -0700
Subject: [PATCH 14/18] address CI failures

---
 src/material-experimental/mdc-progress-spinner/module.ts    | 2 +-
 .../mdc-progress-spinner/progress-spinner.e2e.spec.ts       | 4 ++--
 .../mdc-progress-spinner/progress-spinner.ts                | 6 +++---
 .../mdc-progress-spinner/testing/BUILD.bazel                | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/material-experimental/mdc-progress-spinner/module.ts b/src/material-experimental/mdc-progress-spinner/module.ts
index 20e0320db991..b7cfff51bc78 100644
--- a/src/material-experimental/mdc-progress-spinner/module.ts
+++ b/src/material-experimental/mdc-progress-spinner/module.ts
@@ -12,9 +12,9 @@ import {MatProgressSpinner, MatSpinner} from './progress-spinner';
 import {CommonModule} from '@angular/common';
 
 @NgModule({
+  imports: [CommonModule],
   exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
   declarations: [MatProgressSpinner, MatSpinner],
-  imports: [CommonModule]
 })
 export class MatProgressSpinnerModule {
 }
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts
index a40f6da8d066..e7347d20a384 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts
@@ -1,7 +1,7 @@
 import {browser, by, element} from 'protractor';
 
-describe('progress-spinner', () => {
-  beforeEach(async () => await browser.get('/progress-spinner'));
+describe('MDC-based progress-spinner', () => {
+  beforeEach(async () => await browser.get('/mdc-progress-spinner'));
 
   it('should render a determinate progress spinner', async () => {
     expect(await element(by.css('mat-progress-spinner')).isPresent()).toBe(true);
diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 05d91c238a81..8211566fe078 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -62,8 +62,8 @@ const BASE_STROKE_WIDTH = 10;
     '[style.width.px]': 'diameter',
     '[style.height.px]': 'diameter',
     '[attr.aria-valuemin]': '0',
-    '[attr.aria-valuemax]': '1',
-    '[attr.aria-valuenow]': 'mode === "determinate" ? value / 100 : null',
+    '[attr.aria-valuemax]': '100',
+    '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',
     '[attr.mode]': 'mode',
   },
   inputs: ['color'],
@@ -237,4 +237,4 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
  * This is a component definition to be used as a convenience reference to create an
  * indeterminate `<mat-progress-spinner>` instance.
  */
-export {MatProgressSpinner as MatSpinner}
+export {MatProgressSpinner as MatSpinner};
diff --git a/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel b/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel
index e44195da954f..d878e9403268 100644
--- a/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel
+++ b/src/material-experimental/mdc-progress-spinner/testing/BUILD.bazel
@@ -29,7 +29,7 @@ ng_test_library(
 ng_web_test_suite(
     name = "unit_tests",
     static_files = [
-        "@npm//:node_modules/@material/linear-progress/dist/mdc.linearProgress.js",
+        "@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
     ],
     deps = [
         ":unit_tests_lib",

From f3b7bf25f1d566dfa126d74b35b2baeeadc348ac Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Mon, 27 Jul 2020 17:07:45 -0700
Subject: [PATCH 15/18] export MatSpinner as const to avoid build error

---
 .../mdc-progress-spinner/progress-spinner.ts                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 8211566fe078..57ef7c64d4f6 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -237,4 +237,4 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
  * This is a component definition to be used as a convenience reference to create an
  * indeterminate `<mat-progress-spinner>` instance.
  */
-export {MatProgressSpinner as MatSpinner};
+export const MatSpinner = MatProgressSpinner;

From 6e2bd838f2ccf26ca08638229af9dd7499b1fdea Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Tue, 28 Jul 2020 14:09:01 -0700
Subject: [PATCH 16/18] fix missing e2e import

---
 src/e2e-app/devserver-configure.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/e2e-app/devserver-configure.js b/src/e2e-app/devserver-configure.js
index 9906a958623d..4b5b619a7d11 100644
--- a/src/e2e-app/devserver-configure.js
+++ b/src/e2e-app/devserver-configure.js
@@ -13,6 +13,7 @@ require.config({
     '@material/base': '@material/base/dist/mdc.base',
     '@material/checkbox': '@material/checkbox/dist/mdc.checkbox',
     '@material/chips': '@material/chips/dist/mdc.chips',
+    '@material/circular-progress': '@material/circular-progress/dist/mdc.circularProgress',
     '@material/dialog': '@material/dialog/dist/mdc.dialog',
     '@material/dom': '@material/dom/dist/mdc.dom',
     '@material/drawer': '@material/drawer/dist/mdc.drawer',

From 664e3639793c5ee21d5eb57371d572158dc17331 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Tue, 28 Jul 2020 15:11:23 -0700
Subject: [PATCH 17/18] fix nits

---
 .../mdc-progress-spinner/progress-spinner.ts                | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
index 57ef7c64d4f6..aeef9a5f4676 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.ts
@@ -85,8 +85,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 
   /** Adapter used by MDC to interact with the DOM. */
-    // TODO: switch to class when MDC removes object spread in foundation
-    // https://github.com/material-components/material-components-web/pull/6256
+  // TODO: switch to class when MDC removes object spread in foundation
+  // https://github.com/material-components/material-components-web/pull/6256
   private _adapter: MDCCircularProgressAdapter = {
     addClass: (className: string) => this._elementRef.nativeElement.classList.add(className),
     hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
@@ -99,6 +99,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     setDeterminateCircleAttribute: (attributeName: string, value: string) =>
       this._determinateCircle.nativeElement.setAttribute(attributeName, value),
   };
+
   constructor(public _elementRef: ElementRef<HTMLElement>,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
               @Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
@@ -237,4 +238,5 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
  * This is a component definition to be used as a convenience reference to create an
  * indeterminate `<mat-progress-spinner>` instance.
  */
+// tslint:disable-next-line:variable-name
 export const MatSpinner = MatProgressSpinner;

From 1329707744c404ca41ec97f2414d0d65689cb820 Mon Sep 17 00:00:00 2001
From: Annie Wang <annieyw@google.com>
Date: Wed, 29 Jul 2020 09:53:57 -0700
Subject: [PATCH 18/18] remove changes to _all-themes to keep PR merge-safe
 (add back in followup)

---
 src/material-experimental/mdc-theming/_all-theme.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/material-experimental/mdc-theming/_all-theme.scss b/src/material-experimental/mdc-theming/_all-theme.scss
index bccb0c356a55..673c3b7f22d5 100644
--- a/src/material-experimental/mdc-theming/_all-theme.scss
+++ b/src/material-experimental/mdc-theming/_all-theme.scss
@@ -10,7 +10,6 @@
 @import '../mdc-tabs/tabs-theme';
 @import '../mdc-table/table-theme';
 @import '../mdc-progress-bar/progress-bar-theme';
-@import '../mdc-progress-spinner/progress-spinner-theme';
 @import '../mdc-input/input-theme';
 @import '../mdc-form-field/form-field-theme';
 @import '../../material/core/theming/check-duplicate-styles';
@@ -26,7 +25,6 @@
     @include mat-mdc-list-theme($theme-or-color-config);
     @include mat-mdc-menu-theme($theme-or-color-config);
     @include mat-mdc-progress-bar-theme($theme-or-color-config);
-    @include mat-mdc-progress-spinner-theme($theme-or-color-config);
     @include mat-mdc-radio-theme($theme-or-color-config);
     @include mat-mdc-slide-toggle-theme($theme-or-color-config);
     @include mat-mdc-snack-bar-theme($theme-or-color-config);