progress-button

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.

• See Demo

Table of contents

• Features
• Getting started
• Usage
• API
• Support
• License

Features

• [x] Choose from 16 different types of progress animations
• [x] Choose the direction of the progress animation
• [x] Manage success and error statuses
• [x] 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.

Properties ProgressButtonComponent

Name	Description
progressValue	Useful to change the value of the progress. You can use it inside the action Output

Support

If this project help you reduce time to develop, you can give me a cup of coffee :)

Author

• Francesco Lisandro - Youdede

Credits

This angular component is liberally inspired to Progress Button Styles of Mary Lou.

License

This project is licensed under the terms of the MIT license.