Can't set height and Width of spinner since beta.12

[argoo83]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Set width and height

What is the current behavior?

<mat-spinner style="width:40px; height: 40px" color="primary"> </mat-spinner>
has no effect since upgrade to beta.12

[argoo83]

mat-spinner.small-spinner svg { width: 40px !important; height: 40px !important; }

Used this css to solve this.

[karlos1337]

I try to set the container width/height, the mat-spinner width/height and the svg width/height, did not work. It works in previous versions only setting mat-spinner (md-spinner) widht/height.

https://stackblitz.com/edit/material2-spinner-issue?file=app%2Fapp.component.scss

[ghd8]

You can use the input parameter "diameter". (beta.12)

<mat-spinner [diameter]="40"></mat-spinner>

[nicktobolski]

What if one is looking for something more responsive? Is there anyway to quickly set it to behave as it did before (where it would automatically adjust to the parent container)?

[willshowell]

@nicktobolski you are probably limited to using !important

https://stackblitz.com/edit/material2-spinner-issue-vzdj9y?file=app/app.component.scss

[RobertDiPaolo]

I've just run into this as well after upgrading to beta12. IMHO the old behaviour was much better, I prefer to size components via CSS rather than input values. Seems a bit hacky to have to use !important.

[e-cloud]

@ghd8 's answer is the official way.

[mawo87]

Unfortunately setting the diameter doesn't solve the problem as the border won't change. For example, if you set the diameter to 16, the border thickness won't adapt and the spinner looks weird.

[karlos1337]

@mawo87 Can define the stroke width with [strokeWidth] input parameter https://material.angular.io/components/progress-spinner/api

[mawo87]

@karlos1337 Thanks for help - I somehow overlookd this.

[dgadelha]

@ghd8 diameter seems to add some padding or w.e.: https://plnkr.co/edit/9LVEpXy8XJAAWjYtVOBh?p=preview

[ghd8]

@dgadelha

<mat-spinner [diameter]="48"></mat-spinner>
instead of
<mat-spinner diameter="48"></mat-spinner>

[dgadelha]

My bad, thank you!

If you set a low diameter (e.g. 20) you may end up with an undesirable progress-spinner, such as the one below. This can be resolved by also configuring the strokeWidth to a low number (e.g. 2).

[josephperrott]

Closing as the height is controlled via diameter