angular/material2 mat-spinner resize

Question

Is there any possible way to change size of mat-spinner or mat-progress-circle?

I read the documentation of mat-spinner and mat-progress-circle but they said that mat-diameter is discontinued and the spinner will take the parent element's size.

How can I put mat-spinner in a mat-button to the left corner without changing the height of the button?

<button mat-button>
   <mat-spinner style="float:left;"></mat-spinner> 
   processing....
</button>

I also tried to change the height using in-line css like

style="float:left;height:10px;width:10px;

but is not pretty to see.

Have you tried with transform: scale(num) ? – Gaston K Feb 02 '17 at 15:52 — Gaston K, Feb 02 '17 at 15:52
transform: scale(num) is working for you? – Vijay R Feb 26 '17 at 08:51 — Vijay R, Feb 26 '17 at 08:51

score 292 · Answer 1 · answered Oct 11 '17 at 07:24

292

With the latest update you should use the diameter property:

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

The diameter represents the amount of pixels for both the width and the height of the spinner. In this case it has a size of 70x70 pixels.

See the following stackblitz example:

https://stackblitz.com/edit/angular-material2-progress-spinner

answered Oct 11 '17 at 07:24

Philipp Kief

8,172
5
33
43

Nice examples in your link. – ceebreenk Oct 13 '17 at 01:15
Perfect, so I had nice loaders that adjusts for mobile, now this. Hehe Web Dev though. – Relm Apr 17 '18 at 16:23
Are there any official guidelines about a good size for mobile? The default size which is 100 is MASSIVE on mobile. 70 does seem perfect though :-) – Simon_Weaver Dec 08 '18 at 03:18
1

Setting it a static size is good. But what if I need to make it responsive? – Arda Oğul Üçpınar May 09 '19 at 11:19
If you get spinner shaking, see https://github.com/angular/components/issues/11756 – corolla Nov 24 '19 at 16:09

Tuba Salçi · Answer 2 · 2021-06-11T09:57:56.760

15

here is the answer :

<mat-spinner mode="indeterminate" style="margin:0 auto;" [diameter]="30"></mat-spinner>

edited Jun 11 '21 at 09:57

answered Nov 11 '20 at 06:21

Tuba Salçi

301
2
4

score 10 · Answer 3 · answered Jan 17 '19 at 05:42

10

you can add this to your css file:

mat-spinner {
  zoom: 0.2
}

answered Jan 17 '19 at 05:42

Karthik

1,447
1
18
26

6

[zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom#Specifications) is nonstandard and firefox doesn't support it – barbsan Jan 17 '19 at 11:58

score 7 · Accepted Answer · answered Feb 23 '17 at 15:36

I'm not sure why your styling did not bring the desired results. As you mentioned, the svg content inside md-spinner will scale to the container's size, so applying width and height to the md-spinner should work.

CSS

md-spinner {
  float:left; 
  width: 24px; 
  height: 24px; 
  margin: 5px 10px 0px 0px;
}

Template

<button md-raised-button>
  <md-spinner></md-spinner>Raised Button with spinner
</button>

Plunk

http://plnkr.co/edit/RMvCtOCV9f4TxgB4G0Yz?p=preview

Is this what you'd like to achieve?

It didn't work for me either until I added `!important` to all of the styles. — dan, Sep 15 '17 at 15:31

angular/material2 mat-spinner resize

4 Answers4