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

    1.2.0 • 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.

    Install

    npm i progress-button

    DownloadsWeekly Downloads

    23

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    221 kB

    Total Files

    19

    Last publish

    Collaborators

    • youdede_eu