A simple angular progress button.
npm install progress-button
shell
npm i progress-button
`
$3
`js
import {ProgressButtonModule} from 'progress-button';
@NgModule({
declarations: [AppComponent],
imports: [ProgressButtonModule],
bootstrap: [AppComponent]
})
export class AppModule {}
`
$3
`html
(action)="run($event)"
[progress]="progressData"
[design]="designData">
Submit
`
`javascript
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);
}
`
$3
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.
`javascript
import {ProgressButtonModule} from 'progress-button';
@NgModule({
declarations: [AppComponent],
imports: [
ProgressButtonModule.forRoot({
design: {...}, // ProgressButtonDesign interface
progress: {...} // ProgressButtonData interface
})
],
bootstrap: [AppComponent]
})
export class AppModule {}
`
API
$3
| 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. |
$3
| Output | Params | Description |
| ------------- | ------------- | ------------- |
| (action) | ProgressButtonComponent | Fires on a mouse click on the element. |
$3
| 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. |
$3
| Name | Description |
| ------------- | ------------- |
| progressValue | Useful to change the value of the progress. You can use it inside the action` Output |