Spinner and progress in Angular Progress button component
Change spinner position
Spinner position can be changed by modifying the position
property of spinSettingsModel
. By default, the spinner is positioned at the left of the ProgressButton. You can position it at the left
, right
, top
, bottom
, or center
of the text content.
Change spinner size
Spinner size can be changed by modifying the width
property of spinSettingsModel
. In this demo, the width
is set to 20
to change the spinner size.
Spinner template
You can use custom spinner by specifying the template
property of spinSettingsModel
with custom styles.
The following sample demonstrates the above functionalities of the spinner.
import { Component } from '@angular/core';
import { SpinSettingsModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<!-- To render progress button. -->
<button ejs-progressbutton content='Submit' [spinSettings]='spinSettings'></button>`
})
export class AppComponent {
private spinSettings : SpinSettingsModel = { position: 'Right', width: 20, template: '<div class="template"></div>' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ProgressButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Progress
Content animation
The content
of the ProgressButton can be animated during progress using the effect
property of animationSettingsModel
. You can also set custom duration and timing function using the duration
and easing
properties. The possible effect
values are None
, SlideLeft
, SlideRight
, SlideUp
, SlideDown
, ZoomIn
, and ZoomOut
.
import { Component } from '@angular/core';
import { SpinSettingsModel, AnimationSettingsModel } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<button ejs-progressbutton content='Slide Left' [enableProgress]='true' [animationSettings]= 'animationSettings' [spinSettings]='spinSettings'></button>`
})
export class AppComponent {
private spinSettings : SpinSettingsModel = { position: 'Center' };
private animationSettings : AnimationSettingsModel = { effect:'SlideLeft', duration: 500, easing: 'linear' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ProgressButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Change step of the ProgressButton
The progress can be visualized at the specified interval by changing the step
property in the begin
event of the ProgressButton. In this demo, the step
property is set to 20
to show progress at every 20% increment.
import { Component } from '@angular/core';
import { ProgressEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<button ejs-progressbutton content='Progress Step' [enableProgress]='true' (begin)='begin($event)' cssClass='e-hide-spinner'></button>`
})
export class AppComponent {
private begin(args: ProgressEventArgs): void {
args.step = 20;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ProgressButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The class
e-hide-spinner
hides the spinner in the ProgressButton, For more information, see hide spinner section.
Change progress dynamically
The progress can be changed dynamically by modifying the percent
property in the ProgressButton events. In this demo, on 40% completion of progress, the percent
property is set to 90
to show dynamic change of the progress.
import { Component } from '@angular/core';
import { ProgressEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<button ejs-progressbutton [content]='content' [enableProgress]='true' [duration]='15000' (begin)='begin($event)' (progress)='progress($event)' (end)='end($event)' cssClass='e-hide-spinner'></button>`
})
export class AppComponent {
private content: string = 'Progress';
private begin(args: ProgressEventArgs): void {
this.content = 'Progress ' + args.percent + '%';
}
private progress(args: ProgressEventArgs): void {
this.content = 'Progress ' + args.percent + '%';
if (args.percent === 40) {
args.percent = 90;
}
}
private end(args: ProgressEventArgs): void {
this.content = 'Progress ' + args.percent + '%';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ProgressButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The method
dataBind
applies the property changes immediately to the component.
Start and stop methods
You can pause and resume the progress using the stop
and start
methods, respectively. In this demo, clicking the ProgressButton will pause and resume the progress.
import { Component, ViewChild } from '@angular/core';
import { ProgressButtonComponent } from '@syncfusion/ej2-angular-splitbuttons';
@Component({
selector: 'app-root',
template: `<button #progressBtn ejs-progressbutton [content]='content' [enableProgress]='true' [duration]='4000' (end)='end()' [iconCss]='iconCss' cssClass='e-hide-spinner' (click)="btnClick()"></button>`
})
export class AppComponent {
@ViewChild('progressBtn')
private progressBtn : ProgressButtonComponent;
private content: string = 'Download';
private iconCss: string = 'e-btn-sb-icon e-download';
private end(): void {
this.content = 'Download';
this.iconCss = 'e-btn-sb-icon e-download';
}
private btnClick(): void {
if(this.content === 'Download') {
this.content = 'Pause';
this.iconCss = 'e-btn-sb-icon e-pause';
}
else if(this.content === 'Pause') {
this.content = 'Resume';
this.iconCss = 'e-btn-sb-icon e-play';
this.progressBtn.stop();
}
else if(this.content === 'Resume') {
this.content = 'Pause';
this.iconCss = 'e-btn-sb-icon e-pause';
this.progressBtn.start();
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ProgressButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);