progress-button
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

Angular Progress Button

Build Status npm version demo online npm downloads Code Climate maintainability Code Coverage Dependencies GitHub issues Conventional Commits npm bundle size

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.

preview

Table of contents

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 :)

Donate

Author

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.

Package Sidebar

Install

npm i progress-button

Weekly Downloads

5

Version

1.2.3

License

MIT

Unpacked Size

224 kB

Total Files

19

Last publish

Collaborators

  • youdede_eu