Home

Awesome

<p align="center"> <img width="20%" height="20%" src="https://raw.githubusercontent.com/dkreider/ngx-loading-buttons/main/logo.png"> </p> <br />

npm npm npm bundle size (minified + gzip) ngx-loading-buttons PRs All Contributors npm

A lightweight Angular library to add a loading spinner to your Angular Material buttons.

<img src="https://raw.githubusercontent.com/dkreider/ngx-loading-buttons/main/example.gif">

Installation

ng add ngx-loading-buttons

Usage

Import the NgxLoadingButtonsModule into your AppModule. You can configure it as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxLoadingButtonsModule } from 'ngx-loading-buttons';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule,
    NgxLoadingButtonsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And last of all, add it to your <button> element like this.

<button mat-raised-button [mtBasicSpinner]="true">Basic</button>

You can also hide the button's text like this.

<button mat-raised-button [mtBasicSpinner]="true" [hideText]="true">Basic</button>

A "real-world component" would likely look like this.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  saving: boolean = false;

  save(): void {
    this.saving = true;
    // Juggle 5 hens while wiggling your toes and other magic... 🤡
  }


}

And our template file.

<button mat-raised-button [mtBasicSpinner]="saving" (click)="save()">Basic</button>

Add our styles to yours

@import 'ngx-loading-buttons/styles';

Issues 🐛

Found a bug? Want to request a feature? Confused? Or wanna simply comment on how useful this library is?

Open an issue here.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://www.danielk.tech/"><img src="https://avatars.githubusercontent.com/u/11043868?v=4" width="100px;" alt=""/><br /><sub><b>Daniel Kreider</b></sub></a><br /><a href="https://github.com/dkreider/ngx-loading-buttons/commits?author=dkreider" title="Code">💻</a></td> <td align="center"><a href="https://github.com/Totto16"><img src="https://avatars.githubusercontent.com/u/32566573?v=4" width="100px;" alt=""/><br /><sub><b>Totto</b></sub></a><br /><a href="https://github.com/dkreider/ngx-loading-buttons/commits?author=Totto16" title="Code">💻</a></td> <td align="center"><a href="https://megaphone.info/"><img src="https://avatars.githubusercontent.com/u/44493964?v=4" width="100px;" alt=""/><br /><sub><b>Raphaël Balet</b></sub></a><br /><a href="https://github.com/dkreider/ngx-loading-buttons/commits?author=rbalet" title="Code">💻</a></td> <td align="center"><a href="https://damingerdai.github.io/"><img src="https://avatars.githubusercontent.com/u/16384908?v=4" width="100px;" alt=""/><br /><sub><b>Arthur Ming</b></sub></a><br /><a href="https://github.com/dkreider/ngx-loading-buttons/commits?author=damingerdai" title="Code">💻</a></td> <td align="center"><a href="https://www.bolzplatzarena.net/"><img src="https://avatars.githubusercontent.com/u/6323357?v=4" width="100px;" alt=""/><br /><sub><b>Thomas Renger</b></sub></a><br /><a href="https://github.com/dkreider/ngx-loading-buttons/commits?author=rengert" title="Code">💻</a></td> <td align="center"><a href="https://github.com/fwautriche"><img src="https://avatars.githubusercontent.com/u/3090227?v=4" width="100px;" alt=""/><br /><sub><b>Fabien Wautriche</b></sub></a><br />🐛</td> <td align="center"><a href="https://github.com/tux1337"><img src="https://avatars.githubusercontent.com/u/33804893?v=4" width="100px;" alt=""/><br /><sub><b>tux1337</b></sub></a><br />🐛</td> <td align="center"><a href="https://github.com/MilanNemeth"><img src="https://avatars.githubusercontent.com/u/63391662?v=4" width="100px;" alt=""/><br /><sub><b>Milán Németh</b></sub></a><br />🐛</td> <td align="center"><a href="https://github.com/Deewens"><img src="https://avatars.githubusercontent.com/u/26287270?v=4" width="100px;" alt=""/><br /><sub><b>Adrien</b></sub></a><br />🐛</td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification.

Contributions of any kind welcome!

Credits