Angular Material progress spinner in-line

Question

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.

Answer 1

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