feat(progress-spinner): switch to css-based animation

Reworks the progress spinner to use a CSS-based indeterminate animation. For IE and Edge where we can't pull of the animation reliably, it falls back to a non-spec animation.

Author: crisbeto

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

@@ -8,15 +8,15 @@
   $warn: map-get($theme, warn);
 
   .mat-progress-spinner, .mat-spinner {
-    path {
+    circle {
       stroke: mat-color($primary);
     }
 
-    &.mat-accent path {
+    &.mat-accent circle {
       stroke: mat-color($accent);
     }
 
-    &.mat-warn path {
+    &.mat-warn circle {
       stroke: mat-color($warn);
     }
   }

src/lib/progress-spinner/index.ts

@@ -8,28 +8,15 @@
 
 import {NgModule} from '@angular/core';
 import {MdCommonModule} from '../core';
-import {
-  MdProgressSpinner,
-  MdSpinner,
-  MdProgressSpinnerCssMatStyler,
-} from './progress-spinner';
+import {PlatformModule} from '@angular/cdk/platform';
+import {MdProgressSpinner, MdSpinner} from './progress-spinner';
 
 
 @NgModule({
-  imports: [MdCommonModule],
-  exports: [
-    MdProgressSpinner,
-    MdSpinner,
-    MdCommonModule,
-    MdProgressSpinnerCssMatStyler
-  ],
-  declarations: [
-    MdProgressSpinner,
-    MdSpinner,
-    MdProgressSpinnerCssMatStyler
-  ],
+  imports: [MdCommonModule, PlatformModule],
+  exports: [MdProgressSpinner, MdSpinner, MdCommonModule],
+  declarations: [MdProgressSpinner, MdSpinner],
 })
-class MdProgressSpinnerModule {}
+export class MdProgressSpinnerModule {}
 
-export {MdProgressSpinnerModule};
 export * from './progress-spinner';

src/lib/progress-spinner/progress-spinner.html

@@ -4,8 +4,17 @@
   element containing the SVG. `focusable="false"` prevents IE from allowing the user to
   tab into the SVG element.
 -->
-<svg viewBox="0 0 100 100"
-     preserveAspectRatio="xMidYMid meet"
-     focusable="false">
-  <path #path [style.strokeWidth]="strokeWidth"></path>
+<svg
+  width="100"
+  height="100"
+  viewBox="0 0 100 100"
+  preserveAspectRatio="xMidYMid meet"
+  focusable="false">
+
+  <circle
+    cx="50%"
+    cy="50%"
+    [attr.r]="_circleRadius"
+    [style.stroke-dashoffset.px]="_getStrokeDashOffset()"
+    [style.stroke-width.px]="strokeWidth"></circle>
 </svg>

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

@@ -1,51 +1,57 @@
 @import '../core/style/variables';
 
 
-// Animation Durations
-$mat-progress-spinner-duration: 5250ms !default;
-$mat-progress-spinner-constant-rotate-duration: $mat-progress-spinner-duration * 0.55 !default;
-$mat-progress-spinner-sporadic-rotate-duration: $mat-progress-spinner-duration !default;
+// Animation config
+$mat-progress-spinner-stroke-rotate-fallback-duration: 10 * 1000ms !default;
+$mat-progress-spinner-stroke-rotate-fallback-ease: cubic-bezier(0.87, 0.03, 0.33, 1) !default;
 
-// Component sizing
-$mat-progress-spinner-stroke-width: 10px !default;
-// Height and weight of the viewport for mat-progress-spinner.
-$mat-progress-spinner-viewport-size: 100px !default;
+$_mat-progress-spinner-radius: 45px;
+$_mat-progress-spinner-circumference: $pi * $_mat-progress-spinner-radius * 2;
 
 
-:host {
+.mat-progress-spinner {
   display: block;
-  // Height and width are provided for mat-progress-spinner to act as a default.
-  // The height and width are expected to be overwritten by application css.
-  height: $mat-progress-spinner-viewport-size;
-  width: $mat-progress-spinner-viewport-size;
-  overflow: hidden;
-
-  // SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
-  // based on a 100px by 100px box.  Additionally all SVG sizes and locations are in reference to
-  // this viewBox.
+  position: relative;
+
   svg {
-    height: 100%;
-    width: 100%;
+    position: absolute;
+    transform: translate(-50%, -50%) rotate(-90deg);
+    top: 50%;
+    left: 50%;
     transform-origin: center;
+    overflow: visible;
   }
 
-
-  path {
+  circle {
     fill: transparent;
+    stroke-dasharray: $_mat-progress-spinner-circumference;
+    stroke-dashoffset: $_mat-progress-spinner-circumference;
+    transform-origin: center;
+    transition: stroke-dashoffset 225ms linear;
+  }
 
-    transition: stroke $swift-ease-in-duration $ease-in-out-curve-function;
+  &.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
+    animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
+        linear infinite;
+
+    circle {
+      // Note: we multiply the duration by 8, because the animation is spread out in 8 stages.
+      animation: mat-progress-spinner-stroke-rotate $swift-ease-in-out-duration * 8
+          $ease-in-out-curve-function infinite;
+      transition-property: stroke;
+    }
   }
 
+  &.mat-progress-spinner-indeterminate-fallback-animation[mode='indeterminate'] {
+    animation: mat-progress-spinner-stroke-rotate-fallback
+               $mat-progress-spinner-stroke-rotate-fallback-duration
+               $mat-progress-spinner-stroke-rotate-fallback-ease
+               infinite;
 
-  &[mode='indeterminate'] svg {
-    animation-duration: $mat-progress-spinner-sporadic-rotate-duration,
-    $mat-progress-spinner-constant-rotate-duration;
-    animation-name: mat-progress-spinner-sporadic-rotate,
-                    mat-progress-spinner-linear-rotate;
-    animation-timing-function: $ease-in-out-curve-function,
-                               linear;
-    animation-iteration-count: infinite;
-    transition: none;
+    circle {
+      stroke-dashoffset: (1 - 0.8) * $_mat-progress-spinner-circumference;
+      transition-property: stroke;
+    }
   }
 }
 
@@ -55,13 +61,44 @@ $mat-progress-spinner-viewport-size: 100px !default;
   0%       { transform: rotate(0deg); }
   100%     { transform: rotate(360deg); }
 }
-@keyframes mat-progress-spinner-sporadic-rotate {
-  12.5%    { transform: rotate( 135deg); }
-  25%      { transform: rotate( 270deg); }
-  37.5%    { transform: rotate( 405deg); }
-  50%      { transform: rotate( 540deg); }
-  62.5%    { transform: rotate( 675deg); }
-  75%      { transform: rotate( 810deg); }
-  87.5%    { transform: rotate( 945deg); }
-  100%     { transform: rotate(1080deg); }
+
+@at-root {
+  $start: (1 - 0.05) * $_mat-progress-spinner-circumference; // start the animation at 5%
+  $end: (1 - 0.8) * $_mat-progress-spinner-circumference; // end the animation at 80%
+  $fallback-iterations: 4;
+
+  @keyframes mat-progress-spinner-stroke-rotate {
+    /*
+      stylelint-disable declaration-block-single-line-max-declarations,
+        declaration-block-semicolon-space-after
+    */
+    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); }
+    25%     { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(72.5deg); }
+
+    25.1%   { 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); }
+    50%     { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(161.5deg); }
+
+    50.01%  { 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); }
+    75%     { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(251.5deg); }
+
+    75.01%  { 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); }
+    100%    { stroke-dashoffset: $start;  transform: rotateX(180deg) rotate(341.5deg); }
+    // stylelint-enable
+  }
+
+  @keyframes mat-progress-spinner-stroke-rotate-fallback {
+    @for $i from 0 through $fallback-iterations {
+      $percent: 100 / $fallback-iterations * $i;
+      $offset: 360 / $fallback-iterations;
+      #{$percent}% { transform: rotate(#{$i * (360 * 3 + $offset)}deg); }
+    }
+  }
 }

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

@@ -2,7 +2,6 @@ import {TestBed, async} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdProgressSpinnerModule} from './index';
-import {PROGRESS_SPINNER_STROKE_WIDTH} from './progress-spinner';
 
 
 describe('MdProgressSpinner', () => {
@@ -16,13 +15,9 @@ describe('MdProgressSpinner', () => {
         ProgressSpinnerWithValueAndBoundMode,
         ProgressSpinnerWithColor,
         ProgressSpinnerCustomStrokeWidth,
-        IndeterminateProgressSpinnerWithNgIf,
-        SpinnerWithNgIf,
-        SpinnerWithColor
+        SpinnerWithColor,
       ],
-    });
-
-    TestBed.compileComponents();
+    }).compileComponents();
   }));
 
   it('should apply a mode of "determinate" if no mode is provided.', () => {
@@ -84,51 +79,37 @@ describe('MdProgressSpinner', () => {
     expect(progressComponent.value).toBe(0);
   });
 
-  it('should clean up the indeterminate animation when the element is destroyed', () => {
-    let fixture = TestBed.createComponent(IndeterminateProgressSpinnerWithNgIf);
-    fixture.detectChanges();
-
-    let progressElement = fixture.debugElement.query(By.css('md-progress-spinner'));
-    expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy();
-
-    fixture.componentInstance.isHidden = true;
-    fixture.detectChanges();
-    expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
-  });
-
-  it('should clean up the animation when a spinner is destroyed', () => {
-    let fixture = TestBed.createComponent(SpinnerWithNgIf);
-    fixture.detectChanges();
-
-    let progressElement = fixture.debugElement.query(By.css('md-spinner'));
-
-    expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy();
+  it('should allow a custom stroke width', () => {
+    const fixture = TestBed.createComponent(ProgressSpinnerCustomStrokeWidth);
+    const circleElement = fixture.nativeElement.querySelector('circle');
 
-    fixture.componentInstance.isHidden = true;
+    fixture.componentInstance.strokeWidth = 40;
     fixture.detectChanges();
 
-    expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
+    expect(parseInt(circleElement.style.strokeWidth))
+      .toBe(40, 'Expected the custom stroke width to be applied to the circle element.');
   });
 
-  it('should set a default stroke width', () => {
-    let fixture = TestBed.createComponent(BasicProgressSpinner);
-    let pathElement = fixture.nativeElement.querySelector('path');
+  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-progress-spinner');
 
+    fixture.componentInstance.strokeWidth = 40;
     fixture.detectChanges();
 
-    expect(parseInt(pathElement.style.strokeWidth))
-      .toBe(PROGRESS_SPINNER_STROKE_WIDTH, 'Expected the default stroke-width to be applied.');
+    expect(element.style.width).toBe('130px');
+    expect(element.style.height).toBe('130px');
   });
 
-  it('should allow a custom stroke width', () => {
-    let fixture = TestBed.createComponent(ProgressSpinnerCustomStrokeWidth);
-    let pathElement = fixture.nativeElement.querySelector('path');
+  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-progress-spinner');
 
-    fixture.componentInstance.strokeWidth = 40;
+    fixture.componentInstance.strokeWidth = 5;
     fixture.detectChanges();
 
-    expect(parseInt(pathElement.style.strokeWidth))
-      .toBe(40, 'Expected the custom stroke width to be applied to the path element.');
+    expect(element.style.width).toBe('100px');
+    expect(element.style.height).toBe('100px');
   });
 
   it('should set the color class on the md-spinner', () => {
@@ -161,23 +142,6 @@ describe('MdProgressSpinner', () => {
     expect(progressElement.nativeElement.classList).not.toContain('mat-primary');
   });
 
-  it('should re-render the circle when switching from indeterminate to determinate mode', () => {
-    let fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode);
-    let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')).nativeElement;
-
-    fixture.componentInstance.mode = 'indeterminate';
-    fixture.detectChanges();
-
-    let path = progressElement.querySelector('path');
-    let oldDimesions = path.getAttribute('d');
-
-    fixture.componentInstance.mode = 'determinate';
-    fixture.detectChanges();
-
-    expect(path.getAttribute('d')).not
-        .toBe(oldDimesions, 'Expected circle dimensions to have changed.');
-  });
-
   it('should remove the underlying SVG element from the tab order explicitly', () => {
     const fixture = TestBed.createComponent(BasicProgressSpinner);
 
@@ -203,13 +167,6 @@ class IndeterminateProgressSpinner { }
 @Component({template: '<md-progress-spinner value="50" [mode]="mode"></md-progress-spinner>'})
 class ProgressSpinnerWithValueAndBoundMode { mode = 'indeterminate'; }
 
-@Component({template: `
-    <md-progress-spinner mode="indeterminate" *ngIf="!isHidden"></md-progress-spinner>`})
-class IndeterminateProgressSpinnerWithNgIf { isHidden = false; }
-
-@Component({template: `<md-spinner *ngIf="!isHidden"></md-spinner>`})
-class SpinnerWithNgIf { isHidden = false; }
-
 @Component({template: `<md-spinner [color]="color"></md-spinner>`})
 class SpinnerWithColor { color: string = 'primary'; }