States in Angular Progress bar component
20 Sep 20225 minutes to read
Visualize progress in different modes.
Determinate
This is the default state. You can use it when the progress estimation is known.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
template:
` <ejs-progressbar id='percentage' type='Linear' height='60' value=100>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ProgressBarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Indeterminate
By enabling the IsIndeterminate property, the state of the progress bar can be changed to indeterminate when the progress cannot be estimated or is not being calculated. It can be combined with determinate mode to know that the application is estimating progress before the actual progress starts.
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template:
` <ejs-progressbar id='percentage' type='Linear' height='60' value=20 [isIndeterminate]='isIndeterminate' [animation]='animation'>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
public isIndeterminate: boolean;
public animation: AnimationModel;
ngOnInit(): void {
this.animation = {enable: true};
this.animation = { enable: true, duration: 2000, delay: 0 };
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ProgressBarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Buffer
You can use a secondary progress indicator when the primary progress depends on the secondary progress. This will allow users to visualize both primary and secondary progress simultaneously.
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template:
` <ejs-progressbar id='percentage' type='Linear' height='60' value=40 secondaryProgress=60 [animation]='animation'>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
public animation: AnimationModel;
ngOnInit(): void {
this.animation = { enable: true, duration: 2000, delay: 0 };
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ProgressBarModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);