fix(progress spinner) : fix flickering animation (#9833)

Author: michaelthe

src/lib/progress-spinner/progress-spinner.scss

@@ -69,24 +69,31 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
       stylelint-disable declaration-block-single-line-max-declarations,
         declaration-block-semicolon-space-after
     */
+
+    // .0001 percentage difference is necessary in order to avoid unwanted animation frames
+    // for example because the animation duration is 4 seconds, .1% accounts to 4ms
+    // which are enough to see the flicker described in
+    // https://github.com/angular/material2/issues/8984
+    //
+    // NOTE: this is replaced by js for any diameter other that 100
     0%      { stroke-dashoffset: $start;  transform: rotate(0); }
     12.5%   { stroke-dashoffset: $end;    transform: rotate(0); }
-    12.51%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(72.5deg); }
+    12.5001%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(72.5deg); }
     25%     { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(72.5deg); }
 
-    25.1%   { stroke-dashoffset: $start;  transform: rotate(270deg); }
+    25.0001%   { stroke-dashoffset: $start;  transform: rotate(270deg); }
     37.5%   { stroke-dashoffset: $end;    transform: rotate(270deg); }
-    37.51%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(161.5deg); }
+    37.5001%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(161.5deg); }
     50%     { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(161.5deg); }
 
-    50.01%  { stroke-dashoffset: $start;  transform: rotate(180deg); }
+    50.0001%  { stroke-dashoffset: $start;  transform: rotate(180deg); }
     62.5%   { stroke-dashoffset: $end;    transform: rotate(180deg); }
-    62.51%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(251.5deg); }
+    62.5001%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(251.5deg); }
     75%     { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(251.5deg); }
 
-    75.01%  { stroke-dashoffset: $start;  transform: rotate(90deg); }
+    75.0001%  { stroke-dashoffset: $start;  transform: rotate(90deg); }
     87.5%   { stroke-dashoffset: $end;    transform: rotate(90deg); }
-    87.51%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(341.5deg); }
+    87.5001%  { stroke-dashoffset: $end;    transform: rotateX(180deg) rotate(341.5deg); }
     100%    { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(341.5deg); }
     // stylelint-enable
   }

src/lib/progress-spinner/progress-spinner.ts

@@ -44,26 +44,30 @@ export class MatProgressSpinnerBase {
 }
 export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary');
 
+// .0001 percentage difference is necessary in order to avoid unwanted animation frames
+// for example because the animation duration is 4 seconds, .1% accounts to 4ms
+// which are enough to see the flicker described in
+// https://github.com/angular/material2/issues/8984
 const INDETERMINATE_ANIMATION_TEMPLATE = `
  @keyframes mat-progress-spinner-stroke-rotate-DIAMETER {
     0%      { stroke-dashoffset: START_VALUE;  transform: rotate(0); }
     12.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(0); }
-    12.51%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(72.5deg); }
+    12.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(72.5deg); }
     25%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(72.5deg); }
 
-    25.1%   { stroke-dashoffset: START_VALUE;  transform: rotate(270deg); }
+    25.0001%   { stroke-dashoffset: START_VALUE;  transform: rotate(270deg); }
     37.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(270deg); }
-    37.51%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(161.5deg); }
+    37.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(161.5deg); }
     50%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(161.5deg); }
 
-    50.01%  { stroke-dashoffset: START_VALUE;  transform: rotate(180deg); }
+    50.0001%  { stroke-dashoffset: START_VALUE;  transform: rotate(180deg); }
     62.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(180deg); }
-    62.51%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(251.5deg); }
+    62.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(251.5deg); }
     75%     { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(251.5deg); }
 
-    75.01%  { stroke-dashoffset: START_VALUE;  transform: rotate(90deg); }
+    75.0001%  { stroke-dashoffset: START_VALUE;  transform: rotate(90deg); }
     87.5%   { stroke-dashoffset: END_VALUE;    transform: rotate(90deg); }
-    87.51%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(341.5deg); }
+    87.5001%  { stroke-dashoffset: END_VALUE;    transform: rotateX(180deg) rotate(341.5deg); }
     100%    { stroke-dashoffset: START_VALUE;  transform: rotateX(180deg) rotate(341.5deg); }
   }
 `;