Search results

Customization in Angular ProgressBar component

03 Oct 2022 / 4 minutes to read

Segments

We can divide a progress bar into multiple segments using a segmentCount to visualize the progress of multiple sequential tasks.

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='Circular' height='60' segmentCount=8 value=100  [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);

Thickness

You can customize the thickness of the track using trackThickness and progress using progressThickness to render the ProgressBar with different appearances.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { AnimationModel, FontModel } from '@syncfusion/ej2-progressbar';
@Component({
    selector: 'my-app',
    template:
    `<ejs-progressbar  id='percentage' type='Linear' height='60' width='90%'  trackThickness=24  progressThickness=24 value=100 [showProgressValue]='showProgressValue' [labelStyle]='labelStyle' [animation]='animation'>
     </ejs-progressbar>`
})
export class AppComponent implements OnInit {
    public showProgressValue: boolean;
    public labelStyle: FontModel;
    public animation: AnimationModel;
    ngOnInit(): void {
      this.labelStyle = { color: '#FFFFFF' };
      this.showProgressValue = 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);

Min, Max, and Value

The progress bar value is set by using the value property in progress bar. The minimum and maximum value of the progress bar can be set by using the min and max property in the progress bar respectively.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { AnimationModel, FontModel } from '@syncfusion/ej2-progressbar';
@Component({
    selector: 'my-app',
    template:
    `<ejs-progressbar #linear id='linear' [type]='type' [maximum]='max' [minimum]='min' [value]='value' [width]='width' [height]='height'></ejs-progressbar>`
})
export class AppComponent implements OnInit {
    public type: string;
    public width: string;
    public height: string;
    public min: number;
    public max: number;
    public value: number;
    public animation: AnimationModel;
    ngOnInit(): void {
      this.type = "Linear";
      this.width = "100%";
      this.height = "60";
      this.min = 0;
      this.max = 100;
      this.value = 70;
    }
}
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);

Radius

The radius of the progress bar can be customized using radius property and corner can be customized by cornerRadius property.

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='Circular' height='160px' width='160px'  trackColor='#FFD939'        radius='100%' progressColor='white' cornerRadius='Round' trackThickness=80 progressThickness=10 value=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);

InnerRadius

The inner radius of the progress bar can be customized using innerRadius property.

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='Circular' height='160px' width='160px'  trackColor='#FFD939'        radius='100%' innerRadius='70%' progressColor='white' cornerRadius='Round' trackThickness=80 progressThickness=10 value=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);

Progress color and track color

We can customize the color of progress and track by using progressColor and trackColor property.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { FontModel,AnimationModel, ITextRenderEventArgs } from '@syncfusion/ej2-progressbar';
@Component({
    selector: 'my-app',
    template:
    `<ejs-progressbar  id='percentage' type='Linear' height='60' width='90%' trackThickness=24  progressThickness=24  value = 50  progressColor='#E3165B' trackColor='#F8C7D8' [labelStyle]='labelStyle'    (textRender)='textRender($event)'   [showProgressValue]='showProgressValue' [animation]='animation'>
    </ejs-progressbar>`
})
export class AppComponent implements OnInit {
    public animation: AnimationModel;
    public labelStyle: FontModel;
    public showProgressValue: boolean;
    public textRender2(args: ITextRenderEventArgs): void {
        args.text = '50';
    }
    ngOnInit(): void {
        this.animation = { enable: true, duration: 2000, delay: 0 };
        this.labelStyle = { color: '#FFFFFF' };
        this.showProgressValue = 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);