Customization in Angular Progress bar component

27 Apr 202410 minutes to read

Segments

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    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 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Thickness

Customize the thickness of the track using trackThickness, progress using progressThickness and secondary progress using secondaryProgressThickness to render the progress bar with different appearances.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel, FontModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    template:
    `<ejs-progressbar  id='percentage' type='Linear' height='60' width='90%'  trackThickness=24  progressThickness=24 secondaryProgressThickness=20 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 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel, FontModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    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;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Radius

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    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 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

InnerRadius

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    template: `<ejs-progressbar  id='percentage' type='Circular' height='160px' width='160px'  trackColor='#FFD939' secondaryProgressColor='green' 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 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Progress color and track color

Customize the color of progress, secondary progress, and track by using the progressColor, secondaryProgressColor, and trackColor properties.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ProgressBarModule } from '@syncfusion/ej2-angular-progressbar'



import { Component, OnInit } from '@angular/core';
import { FontModel,AnimationModel, ITextRenderEventArgs } from '@syncfusion/ej2-progressbar';
@Component({
imports: [
         ProgressBarModule
    ],


standalone: true,
    selector: 'my-app',
    template: `<ejs-progressbar  id='percentage' type='Linear' height='60' width='90%' trackThickness=24  progressThickness=24 secondaryProgress=60 value = 50 secondaryProgressColor='green' 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 textRender(args: ITextRenderEventArgs): void {
        args.text = '50';
    }
    ngOnInit(): void {
        this.animation = { enable: true, duration: 2000, delay: 0 };
        this.labelStyle = { color: '#FFFFFF' };
        this.showProgressValue = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));