Search results

Types in Angular ProgressBar component

07 Dec 2021 / 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.

app.component.ts

Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';

@Component({
    selector: 'app-container',
    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;

}

{% endtab %}

Circular

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

app.component.ts

Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';

@Component({
    selector: 'app-container',
    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;

}
Contents
Contents