Angular Material Design Progress Buttons

Very simple Angular4+ Material Design progress buttons

Demo

Usage

Import in any Angular application by running:

$ npm install --save mat-progress-buttons

Install Angular Material: (Getting Started)

$ npm install --save @angular/material @angular/cdk

Install Angular Animations:

npm install --save @angular/animations

Import a material theme into your style.css file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Then import MatProgressButtons into your AppModule:

import { MatProgressButtons } from 'mat-progress-buttons';

@NgModule({
  imports: [ MatProgressButtons ]
})

export class AppModule { }

That's it! Once imported, you can use the components:

Progress Bar Button:

<progress-bar-button [options]="options" (click)="someFunc()"></progress-bar-button>

API:

@Input() options; // button options (see below)

Options:

active: boolean, // is loading
text: string, // button text
buttonColor?: string, // primary/accent/warn
barColor?: string, // primary/accent/warn
raised?: boolean, // raised button
mode?: string, // determinate/intederminate
value?: number // used if mode is determinate

Progress Spinner Button:

<spinner-button [options]="options" (click)="someFunc()"></spinner-button>

API:

@Input() options; // button options (see below)

Options:

active: boolean, // is loading
text: string, // button text
buttonColor?: string, // primary/accent/warn
spinnerColor?: string, // primary/accent/warn
raised?: boolean, // raised button
mode?: string, // determinate/intederminate
value?: number // used if mode is determinate
fullWidth?: boolean // button will be full width if true

Development

Download or clone this repo

run npm install

When you are ready to build, run npm run bundle