CODEWITHSUNDEEP
angularangular-material
Stewart_R
Stewart_R

Reputation: 14525

Angular Material progress spinner in-line

Is it possible to have the Angular Material progress spinner appear in-line with the text and roughly the size of a character?

I want something like:

<span>please wait <mat-spinner></mat-spinner></span>

where the spinner just appears in-line with the 'please wait' text.

Is this possible?

I have had a look at the docs and the examples provided but none of them seem to offer a way forward and a Google + search of StackOverflow didn't turn anything up.

Upvotes: 14

Views: 15596

Answers (2)

Anil Xnm Drz
Anil Xnm Drz

Reputation: 41

you can also use display:inline. you just have to declare mat-spinner between span or p tag

.spinner{
  display:inline;
}
<div class="spinner">
  <p>please wait <mat-spinner [diameter]="12"> </mat-spinner> </p>
</div>

Upvotes: 2

Poul Kruijt
Poul Kruijt

Reputation: 71961

You can use the display: flex on the wrapping element. To set the size of it, you can use the diameter input:

<div class="spinner-wrapper">
  <span>please wait</span>
  <mat-spinner [diameter]="12"></mat-spinner>
</div>

.spinner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

See a working example here

Upvotes: 22

Related Questions