# costimize-mat-progress-buttons

> Costimize material Design Progress Buttons

Latest version **16.0.0** (published 2025-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install costimize-mat-progress-buttons
pnpm add costimize-mat-progress-buttons
yarn add costimize-mat-progress-buttons
bun add costimize-mat-progress-buttons
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 16.0.0 |
| Published | 2025-03-13 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 49.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Costimize corporation |
| Maintainers | costimizeio |
| Keywords | angular, material design, angular 19+, angular 19, costimize-mat-select-autocomplete |

## Links

- npm: https://www.npmjs.com/package/costimize-mat-progress-buttons
- Homepage: https://costimize.io
- Issues: https://github.com/michaeldoye/mat-progress-buttons/issues
- npm.io page: https://npm.io/package/costimize-mat-progress-buttons

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 16.0.0 (latest) — 2025-03-13
- 15.0.0 — 2025-03-06
- 14.0.0 — 2025-03-04
- 13.0.0 — 2025-02-20
- 12.0.0 — 2023-06-30
- 11.0.0 — 2023-04-26
- 10.0.0 — 2023-04-25

## README

<p align="center">
  <img height="256px" width="256px" style="text-align: center;" src="https://cdn.rawgit.com/michaeldoye/mat-progress-buttons/master/demo/src/assets/logo.svg">
</p>

# Costimize Material Design Progress Buttons

## Demo
Download the project and run ng serve

## Dependencies
* [Angular](https://angular.io) (*requires* Angular 15 or higher, tested with 15.2.8)
* [Angular Material](https://material.angular.io/)

## Installation
Install above dependencies via *npm*. 

Now install `costimize-mat-progress-buttons` via:
```shell
npm install --save costimize-mat-progress-buttons
```

---

Once installed you need to import the main module:
```js
import { MatProgressButtonsModule } from 'costimize-mat-progress-buttons';
```
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ` MatProgressButtonsModule .forRoot()`):
```js
import { MatProgressButtonsModule } from 'costimize-mat-progress-buttons';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [MatProgressButtonsModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

Other modules in your application can simply import ` MatProgressButtonsModule `:

```js
import { MatProgressButtonsModule } from 'mat-progress-buttons';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [MatProgressButtonsModule, ...], 
})
export class OtherModule {
}
```

## Usage

### Spinner Button

```js
import { Component } from '@angular/core';
import { MatProgressButtonOptions } from 'costimize-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);
  }
};
```

### Spinner button FAB

You can use the spinner button with a `mat-fab` with an icon. Both `mat-icon` and `font awesome` are supported.

To set up fontawesome to work with `mat-icon` you can see instructions [here](https://stackoverflow.com/a/46208824/3055401)

Use the `icon` property on the `options` object

```
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    spinnerSize: 19,
    raised: false,
    stroked: true,
    flat: false,
    fab: true, // set fab to true
    buttonColor: 'accent',
    spinnerColor: 'accent',
    fullWidth: false,
    disabled: false,
    mode: 'indeterminate',
    icon: {
      color: primary,
      fontSet: 'fa',
      fontIcon: 'fa-save',
      inline: true
    },
  };
```

#### Icon API

```
interface MatProgressButtonIcon {
  color?: ThemePalette; // icon color (primary or accent)
  fontIcon?: string;    // name of the icon (for fontawsome, use 'fa-[icon_name])'
  fontSet?: string;     // if using fontawesome, use 'fa' (omit for material icons)
  inline?: boolean;     // automatically size the icon
  svgIcon?: string;     // name of the icon in the SVG icon set.
}
```

More info in Angular Material [Docs](https://material.angular.io/components/icon/api#MatIcon)

### Bar Button

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

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

  // Button Options
  btnOpts: MatProgressButtonOptions = {
    active: false,
    text: 'Stroked Button',
    buttonColor: 'accent',
    barColor: 'accent',
    raised: false,
    stroked: true,
    flat: false,
    mode: 'indeterminate',
    value: 0,
    disabled: false,
    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);
  }
};
```

### Overriding default CSS

To override CSS (color and background color of spinner buttons), you can write CSS for particular component and use `ViewEncapsulation.None`

Example:

CSS:

```
.class_name {
    background-color: red; // etc.
}
```

TS:

```
@Component({
  ...,
  encapsulation : ViewEncapsulation.None // Here
})
```

**Note**: Bar Button does not support the `fab` style, currently. Hope to have something like [this](https://codepen.io/DevVersion/pen/vGebGB) soon.

## Development

1. Install the dependencies by running `npm i`
2. build the library `ng buld`
3. Link the library `npm link`
4. Navigate to the demo app's directory
  - `cd demo`
  _ `npm i`
  _ `npm start`
5. Works with the legacy components

## Distributor
Copyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)

---
_Source: https://npm.io/package/costimize-mat-progress-buttons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._