Types in Angular Progress bar component
20 Sep 20224 minutes to read
Visualize progress in different shapes (rectangle, circle, and semi-circle) to give a unique appearance to your app design.
Linear
Set type to Linear to get the linear progress bar. It also support secondary progress and different mode of progress.
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template:
`<ejs-progressbar id='determinate' type='Linear' height='60' value=100 [animation]='animation'>
</ejs-progressbar>
<ejs-progressbar id='indeterminate' type='Linear' height='60' value=20
[isIndeterminate]='isIndeterminate' [animation]=' animation'>
</ejs-progressbar>
<ejs-progressbar id='buffer' type='Linear' height='60' value=40 secondaryProgress=60
[animation]=' animation'>
</ejs-progressbar>
<ejs-progressbar id='segment' type='Linear' height='60' value=100 segmentCount=8
[animation]=' animation'>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
public animation: AnimationModel;
public isIndeterminate: boolean;
ngOnInit(): void {
this.animation = { enable: true, duration: 2000, delay: 0 };
this.isIndeterminate = true;
}
}
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);
Circular
Set type to Circular to get the circular progress bar. It also support secondary progress and different mode of progress.
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
selector: 'my-app',
template:
`<ejs-progressbar id='determinate' type='Circular' height='60' value=100 [animation]='animation'>
</ejs-progressbar>
<ejs-progressbar id='indeterminate' type='Circular' height='60' value=20
[isIndeterminate]='isIndeterminate' [animation]=' animation'>
</ejs-progressbar>
<ejs-progressbar id='buffer' type='Circular' height='60' value=40 secondaryProgress=60
[animation]=' animation'>
</ejs-progressbar>
<ejs-progressbar id='segment' type='Circular' height='60' value=100 segmentCount=8
[animation]=' animation'>
</ejs-progressbar>`
})
export class AppComponent implements OnInit {
public animation: AnimationModel;
public isIndeterminate: boolean;
ngOnInit(): void {
this.animation = { enable: true, duration: 2000, delay: 0 };
this.isIndeterminate = true;
}
}
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);