bug(MatProgressSpinner): Small Spinners with diameter <= 10 don’t show

[paulferaud]

Reproduction

Create a spinner with diameter of 10:
https://stackblitz.com/edit/angular-uwttkp?file=src/app/progress-spinner-configurable-example.html

Expected Behavior

See a small spinner

Actual Behavior

Can’t see the spinner

Notes

The spinner does not show because the svg has this element:

<circle cx="50%" cy="50%" r="0" style="animation-name: mat-progress-spinner-stroke-rotate-10; stroke-dasharray: 0px; stroke-width: 10%;" class="ng-star-inserted"></circle>

Notice the r="0". I believe that’s the issue.

It’s set from here:

components/src/material/progress-spinner/progress-spinner.ts

Line 234 in fa96c8a

return (this.diameter - BASE_STROKE_WIDTH) / 2;

I believe using the BASE_STROKE_WIDTH constant here is wrong?

Environment

• Angular: 9.0
• CDK/Material: 9.0
• Browser(s): Google Chrome Version 81.0.4044.141
• Operating System: Chrome OS

[AlexLangdon]

@devversion I can try fixing this, if no one is working on it.