From 4bb696e8e507e8b05fa5fb87691bbe6a1483a976 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 6 Oct 2017 22:23:51 +0200
Subject: [PATCH] fix(progress-spinner): fallback animation not working (#7599)

Fixes #7599.
---
 src/lib/progress-spinner/progress-spinner.html | 1 -
 src/lib/progress-spinner/progress-spinner.scss | 6 +++---
 src/lib/progress-spinner/progress-spinner.ts   | 5 +++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/progress-spinner/progress-spinner.html b/src/lib/progress-spinner/progress-spinner.html
index 237f087fcb0..303d1d0ebfe 100644
--- a/src/lib/progress-spinner/progress-spinner.html
+++ b/src/lib/progress-spinner/progress-spinner.html
@@ -19,6 +19,5 @@
     [style.animation-name]="'mat-progress-spinner-stroke-rotate-' + diameter"
     [style.stroke-dashoffset.px]="_strokeDashOffset"
     [style.stroke-dasharray.px]="_strokeCircumference"
-    [style.transform.rotate]="'360deg'"
     [style.stroke-width.px]="strokeWidth"></circle>
 </svg>
diff --git a/src/lib/progress-spinner/progress-spinner.scss b/src/lib/progress-spinner/progress-spinner.scss
index 9406f80d284..01449362b01 100644
--- a/src/lib/progress-spinner/progress-spinner.scss
+++ b/src/lib/progress-spinner/progress-spinner.scss
@@ -14,9 +14,9 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
 
   svg {
     position: absolute;
-    transform: translate(-50%, -50%) rotate(-90deg);
-    top: 50%;
-    left: 50%;
+    transform: rotate(-90deg);
+    top: 0;
+    left: 0;
     transform-origin: center;
     overflow: visible;
   }
diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts
index e68b35e098e..43f87936f87 100644
--- a/src/lib/progress-spinner/progress-spinner.ts
+++ b/src/lib/progress-spinner/progress-spinner.ts
@@ -165,6 +165,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
       return this._strokeCircumference * (100 - this._value) / 100;
     }
 
+    // In fallback mode set the circle to 80% and rotate it with CSS.
+    if (this._fallbackAnimation && this.mode === 'indeterminate') {
+      return this._strokeCircumference * 0.2;
+    }
+
     return null;
   }