diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.html b/src/demo-app/progress-spinner/progress-spinner-demo.html
index 01eeeff43b82..f9ae6b3d8255 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 @@ <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
index 303d1d0ebfe0..4de40c2dca21 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 4c117bb28d20..a1d655d765d4 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 5bddea884375..18e298ea8865 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;