angular/material2 mat-spinner resize

html css angular-material2
Vijay R picture Vijay R · Nov 17, 2016 · Viewed 39.1k times · Source

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.

Answer

Philipp Kief picture Philipp Kief · Oct 11, 2017

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

Related questions

Alternate row colours angular material table

I am wondering how I target the even/odd rows inside a Angular Material Table so that I can set the even/odd rows a different background colour. I setup my ClaimFileHistoryDataSource class: claimClientInformation: ClaimFileHistory[]; dataSource : ClaimFileHistoryDataSource; displayedColumns = ['TypeImg', 'Description', …

Read More
Angular Material 2 Md-ToolTip with show conditionally

I am trying to use Angular Material 2's MdToolTip. The syntax looks like <span mdTooltip="Tooltip!">I have a tooltip</span> However, I want to implement this function on my anchor tag. I want to show …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More