Skip to content

Commit 85545a4

Browse files
committed
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 #7686.
1 parent 9b07712 commit 85545a4

File tree

4 files changed

+12
-5
lines changed

4 files changed

+12
-5
lines changed

src/demo-app/progress-spinner/progress-spinner-demo.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ <h1>Determinate</h1>
99

1010
<div class="demo-progress-spinner">
1111
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
12-
[value]="progressValue" color="primary" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
12+
[value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
1313
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
14-
[value]="progressValue" color="accent" [diameter]="50"></mat-progress-spinner>
14+
[value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
15+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
16+
[value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
1517
</div>
1618

1719
<h1>Indeterminate</h1>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@
1919
[style.animation-name]="'mat-progress-spinner-stroke-rotate-' + diameter"
2020
[style.stroke-dashoffset.px]="_strokeDashOffset"
2121
[style.stroke-dasharray.px]="_strokeCircumference"
22-
[style.stroke-width.px]="strokeWidth"></circle>
22+
[style.stroke-width.%]="_circleStrokeWidth"></circle>
2323
</svg>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,8 @@ describe('MatProgressSpinner', () => {
108108
fixture.componentInstance.strokeWidth = 40;
109109
fixture.detectChanges();
110110

111-
expect(parseInt(circleElement.style.strokeWidth))
112-
.toBe(40, 'Expected the custom stroke width to be applied to the circle element.');
111+
expect(parseInt(circleElement.style.strokeWidth)).toBe(30, 'Expected the custom stroke ' +
112+
'width to be applied to the circle element as a percentage of the element size.');
113113
expect(svgElement.getAttribute('viewBox'))
114114
.toBe('0 0 130 130', 'Expected the viewBox to be adjusted based on the stroke width.');
115115
});

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,11 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
176176
return null;
177177
}
178178

179+
/** Stroke width of the circle in percent. */
180+
get _circleStrokeWidth() {
181+
return this.strokeWidth / this._elementSize * 100;
182+
}
183+
179184
/** Sets the diameter and adds diameter-specific styles if necessary. */
180185
private _setDiameterAndInitStyles(size: number): void {
181186
this._diameter = size;

0 commit comments

Comments
 (0)