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

This package is a maintained fork of the original ngx-loading-buttons project, published as @seba174/ngx-loading-buttons for current Angular releases.

Installation

ng add @seba174/ngx-loading-buttons

Usage

Import the standalone directives you use directly.

import { Component, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {
  MatBasicSpinnerDirective,
  MatGlowDirective,
} from '@seba174/ngx-loading-buttons';

@Component({
  selector: 'app-save-button',
  imports: [
    MatButtonModule,
    MatBasicSpinnerDirective,
    MatGlowDirective,
  ],
  template: `
    <button mat-raised-button [mtBasicSpinner]="saving()" [hideText]="true" (click)="save()">Save</button>
    <button mat-button [mtGlow]="saving()" glowColor="blue" (click)="save()">Save</button>
  `,
})
export class SaveButtonComponent {
  saving = signal(false);

  save(): void {
    this.saving.set(true);
    // Run your async save operation here.
  }
}

Use mtBasicSpinner for the spinner state.

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

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

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

Use mtGlow for the glow loading state.

<button mat-raised-button [mtGlow]="saving()" glowColor="blue">Basic</button>

Add the package styles to your global styles.

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

Issues

Found a bug or want to request a feature?

Open an issue here.

Credits

• Fidget-spinner icons created by Smashicons - Flaticon