CODEWITHSUNDEEP
htmlcssangular-material2
Vijay R
Vijay R

Reputation: 963

angular/material2 mat-spinner resize

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.

Upvotes: 93

Views: 93518

Answers (4)

Tuba Sal&#231;i
Tuba Sal&#231;i

Reputation: 351

here is the answer :

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

Upvotes: 20

Karthik
Karthik

Reputation: 1587

you can add this to your css file:

mat-spinner {
  zoom: 0.2
}

Upvotes: 11

Philipp Kief
Philipp Kief

Reputation: 8603

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

Upvotes: 305

Andr&#225;s Szepesh&#225;zi
Andr&#225;s Szepesh&#225;zi

Reputation: 6763

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?

Upvotes: 8

Related Questions