Menu
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.
534
To use progress bars we need to simply use <mat-progress-bar> tag. They are many types of progress bars like determinate, indeterminate, buffer and etc. In-order to show the progress we need to give a value property to the tag. If we want to change the theme then we can change it by using the color property.
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
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
