fix(progress-spinner): inaccurate stroke width on really small spinners

Fixes the spinner stroke not being accurate on really small spinners (<20px). This is follow-up from angular#7686.
crisbeto · Oct 11, 2017 · 85545a4 · 85545a4
1 parent 9b07712
commit 85545a4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.html b/src/demo-app/progress-spinner/progress-spinner-demo.html
@@ -9,9 +9,11 @@ <h1>Determinate</h1>
 
 <div class="demo-progress-spinner">
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-      [value]="progressValue" color="primary" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
+    [value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
   <mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
-      [value]="progressValue" color="accent" [diameter]="50"></mat-progress-spinner>
+      [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>

diff --git a/src/lib/progress-spinner/progress-spinner.html b/src/lib/progress-spinner/progress-spinner.html
@@ -19,5 +19,5 @@
     [style.animation-name]="'mat-progress-spinner-stroke-rotate-' + diameter"
     [style.stroke-dashoffset.px]="_strokeDashOffset"
     [style.stroke-dasharray.px]="_strokeCircumference"
-    [style.stroke-width.px]="strokeWidth"></circle>
+    [style.stroke-width.%]="_circleStrokeWidth"></circle>
 </svg>
diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts
@@ -108,8 +108,8 @@ describe('MatProgressSpinner', () => {
     fixture.componentInstance.strokeWidth = 40;
     fixture.detectChanges();
 
-    expect(parseInt(circleElement.style.strokeWidth))
-      .toBe(40, 'Expected the custom stroke width to be applied to the circle element.');
+    expect(parseInt(circleElement.style.strokeWidth)).toBe(30, '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.');
   });

diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts
@@ -176,6 +176,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
     return null;
   }
 
+  /** Stroke width of the circle in percent. */
+  get _circleStrokeWidth() {
+    return this.strokeWidth / this._elementSize * 100;
+  }
+
   /** Sets the diameter and adds diameter-specific styles if necessary. */
   private _setDiameterAndInitStyles(size: number): void {
     this._diameter = size;