Search results

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
Copied to clipboard
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;
  }
}
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);

Circular

Set type to Circular to get the circular progress bar. It also support secondary progress and different mode of progress.

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='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;
  }
}
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);
Contents
Contents