Types in Angular ProgressBar component

28 Nov 2022 / 2 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.

Source

Preview

app.component.ts

app.module.ts

main.ts

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.