From f52f078924762df0d730d48dcd311cc2087ea24c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 12 Oct 2017 07:21:12 +0200
Subject: [PATCH] fix(progress-spinner): inaccurate stroke width on really
 small spinners (#7725)

Fixes the spinner stroke not being accurate on really small spinners (<20px). This is follow-up from #7686.
---
 src/demo-app/progress-spinner/progress-spinner-demo.html | 6 ++++--
 src/lib/progress-spinner/progress-spinner.html           | 2 +-
 src/lib/progress-spinner/progress-spinner.spec.ts        | 4 ++--
 src/lib/progress-spinner/progress-spinner.ts             | 5 +++++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.html b/src/demo-app/progress-spinner/progress-spinner-demo.html
index 01eeeff43b8..eedb490dd4d 100644
--- a/src/demo-app/progress-spinner/progress-spinner-demo.html
+++ b/src/demo-app/progress-spinner/progress-spinner-demo.html
@@ -9,9 +9,11 @@
 
 <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
index 303d1d0ebfe..4de40c2dca2 100644
--- 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
index 4c117bb28d2..a1d655d765d 100644
--- 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
index 5bddea88437..18e298ea886 100644
--- 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;