Progress-button NPM

Angular Progress Button

This represents a button element where the button itself serves as a progress indicator. You can choose from 16 types of animations. 3D animation styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Features

Choose from 16 different types of progress animations
Choose the direction of the progress animation
Manage success and error statuses
Setup all style variables

Getting started

Step 1: Install `progress-button`:

npm i progress-button

Step 2: Import `ProgressButtonModule`:

import {ProgressButtonModule} from 'progress-button';

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

Usage sample

<ydd-progress-button 
    (action)="run($event)" 
    [progress]="progressData" 
    [design]="designData">
    Submit
</ydd-progress-button>

let progressData = {
    animation: 'shrink',
    direction: 'vertical',
}
  
let designData = {
    background: '#222222',
    color: '#FFFFFF',
    successBackground: '#00e175',
    errorBackground: '#ff0c00',
    successIconColor: '#ffffff',
    errorIconColor: '#ffffff',
    progressBackground: '#000000',
    progressInnerBackground: 'rgba(255, 255, 255,0.5)',
    radius:50
}

run = (instance)=>{
    let progress = 0;
    // initialize the progress
    instance.progressInit();
    // This is an example of interval useful to set the progress value
    const interval = setInterval(() => {
      progress += 5;
      // set the progress value
      instance.progressValue = progress;
      if (progress === 100) {
        // stop the progress with success status
        const sub = instance.progressStop('success').subscribe({
          complete() {
            sub.unsubscribe();
          }
        });
        clearInterval(interval);
      }
    }, 200);
  }

Global Configuration

You can easily define progress options and design during the import phase using the method forRoot. This is useful if you need to setup a common behaviour and/or a common style for your buttons.

import {ProgressButtonModule} from 'progress-button';  
  
@NgModule({  
  declarations: [AppComponent],  
  imports: [
	  ProgressButtonModule.forRoot({  
		  design: {...}, // ProgressButtonDesign interface  
		  progress: {...} // ProgressButtonData interface 
	  })
  ],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}

API

Inputs

Input	Type	Default	Required	Description
name	`string`, `null`	`null`	no	A name for the button.
value	`string`, `null`	`null`	no	An initial value for the button.
type	`button`, `reset`, `submit`	`button`	no	The type of button.
autofocus	`true`, `null`	`null`	no	Specifies that a button should automatically get focus when the page loads.
disabled	`true`, `null`	`null`	no	Specifies that a button should be disabled.
form	ProgressButtonForm		no	Form parameters for the button.
progress	ProgressButtonData		no	Specifies progress parameters.
design	ProgressButtonDesign		no	Specifies button and progress design

ProgressButtonForm

Property	Type	Default	Required	Description
id	`string`, `null`	`null`	no	Specifies one or more forms the button belongs to.
action	`string`, `null`	`null`	no	Specifies where to send the form-data when a form is submitted. Only for `type="submit"`.
noValidate	`boolean`, `null`	`button`	no	Specifies that the form-data should not be validated on submission. Only for `type="submit"`.
enctype	`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`, `null`	`null`	no	Specifies how form-data should be encoded before sending it to a server. Only for `type="submit"`.
method	`get`,`post`, `null`	`null`	no	Specifies how to send the form-data (which HTTP method to use). Only for `type="submit"`.
target	`_blank`, `_self`, `_parent`, `_top`, `null`	`null`	no	Specifies where to display the response after submitting the form. Only for `type="submit"`.

ProgressButtonData

Property	Type	Default	Required	Description
animation	`fill`, `shrink`, `rotate-angle-bottom`, `rotate-angle-top`, `rotate-angle-left`, `rotate-angle-right`, `rotate-side-down`, `rotate-side-up`, `rotate-side-left`, `rotate-side-right`, `rotate-back`, `flip-open`, `slide-down`, `move-up`, `top-line`, `lateral-lines`	`fill`	no	Defines the progress animation style.
direction	`horizontal`, `vertical`	`horizontal`	no	Defines the progress animation direction.
statusTime	`number`	`1500`	no	Time in ms that the status (`success` or `error`) will be displayed.

ProgressButtonDesign

Property	Type	Default	Required	Description
background	`string (css color)`	`#222222`	no	The background of the button.
color	`string (css color)`	`#FFFFFF`	no	The text color of the button.
successBackground	`string (css color)`	`#00E175`	no	The background of the button when status is success.
errorBackground	`string (css color)`	`#FF0C00`	no	The background of the button when status is error.
successIconColor	`string (css color)`	`#FFFFFF`	no	The color of the icon when status is success.
errorIconColor	`string (css color)`	`#FFFFFF`	no	The color of the icon when status is error.
progressBackground	`string (css color)`	`#000000`	no	The background of the progress element.
progressInnerBackground	`string (css color)`	`rgba(255, 255, 255,0.5)`	no	The background of the progress inner element.
linesSize	`number`	`10`	no	The size in px of the progress lines. This value is used in the animation styles `top-line` and `lateral-lines`.
radius	`number`	`0`	no	Sets rounded shape to button with given radius size. This value is used in all the animation styles except `rotate-*` animations.

Outputs

Output	Params	Description
(action)	`ProgressButtonComponent`	Fires on a mouse click on the element.

Methods `ProgressButtonComponent`

Method	Params	Description
progressInit		Initialize the progress component. You can use it inside the `action` Output
progressStop	`success` or `error`	Stop the progress component. You can use it inside the `action` Output.