fix(progress-spinner): fallback animation not working (#7599)

Fixes #7599.
angular · Oct 6, 2017 · 4bb696e · 4bb696e
1 parent 746799f
commit 4bb696e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
   }