Press "Enter" to skip to content

Simple Angular 6+ Material Design Progress Buttons

mat-progress buttons are simple Material Design progress buttons for Angular 4+ applications.

angular progress bar example, dynamic progress bar in angular, angular material progress bar example, mat progress bar color stackblitz, change mat progress bar color dynamically

How to make use of it:

Installation

npm install --save mat-progress-buttons

Usage

import { Component } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons';

@Component({
  selector: 'app-home',
  template: '<mat-spinner-button (btnClick)="btnClick()" [options]="btnOpts"></mat-spinner-button>'
})
export class SomeComponent {

  // Button Options
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    spinnerSize: 19,
    raised: false,
    stroked: true,
    flat: false,
    fab: false,
    buttonColor: 'accent',
    spinnerColor: 'accent',
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    customClass: 'some-class',
    // add an icon to the button
    buttonIcon: {
      fontSet: 'fa',
      fontIcon: 'fa-heart',
      inline: true
    }
  };

  // Click handler
  btnClick(): void {
    this.btnOpts.active = true;
    setTimeout(() => {
      this.btnOpts.active = false;
    }, 3350);
  }
};

angular material design progress buttons, mat-progress-buttons Plugin/Github


See Demo And Download

Official Website(michaeldoye): Click Here

This superior jQuery/javascript plugin is developed by michaeldoye. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.