Changing diameter of Angular material spinner breaks it

Question

This is my code

<mat-progress-spinner  [diameter]="50" mode="indeterminate" ></mat-progress-spinner>

If i remove the diameter it will work properly but if i add diameter it will just show up as a circle and not spin.

Is there a way to resize it to make it smaller?

Answer 1

如果无法使“[diameter]”属性正常工作，则可以选择将高度和宽度分开设置

<mat-spinner style="width:40px; height: 40px" color="primary"> </mat-spinner>

Answer 2

You can change value diameter like this:

<mat-progress-spinner  [diameter]="50" mode="indeterminate" ></mat-progress-spinner>
<mat-progress-spinner  [diameter]="30" mode="indeterminate" ></mat-progress-spinner>
<mat-progress-spinner  [diameter]="10" mode="indeterminate" ></mat-progress-spinner>

Working Demo