Search results

States in Angular ProgressBar component

22 Nov 2022 / 2 minutes to read

Visualize progress in different modes.

Determinate

This is the default state. You can use it when the progress estimation is known.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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 {}

}
Copied to clipboard
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 { }
Copied to clipboard
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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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 };
    }
}
Copied to clipboard
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 { }
Copied to clipboard
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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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 };
    }
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);