How to add a loading spinner to an Angular Material button (Step-by-step Guide)
Daniel Kreider
Posted on October 24, 2020
The 2 minute complete guide to adding a loading spinner to the Angular Material Button
Err…
…wouldn't it be nice if Angular Material had a button with a loading spinner? Like the loading buttons that Semantic UI has.
Instead of ranting I decided to try to build my own solution - and succeeded!
With no further ado, I've included the code below.
Our spinner (CSS).
@keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #ffffff;
border-top-color: #000000;
animation: spinner .8s linear infinite;
}
Our button (HTML).
<div style="text-align:center">
<button mat-raised-button color="primary" [class.spinner]="loading" [disabled]="loading" (click)="save()">Save</button>
</div>
Our .ts file (the logic)
export class AppComponent{
title = 'hello-world';
loading = false;
save(): void {
this.loading = true;
}
}
Done!
I told you this was simple. You're welcome. Hope you enjoyed it!
Questions or comments? Don't hesitate to contact me.
💖 💪 🙅 🚩
Daniel Kreider
Posted on October 24, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
angular How to add a loading spinner to an Angular Material button (Step-by-step Guide)
October 24, 2020